Question

A tooltip library is copying the dom node to insert the html inside a tooltip.

I need to target the element inside the tooltip, but the javascript is always applied to the original element.

 <a class="tooltip">Open</a>

<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
    <div class="Content">
        <div class="blue">
        </div>
    </div>
</div>

I have tried using the enter callback of the tooltip, this was not working. And applying things before the html is copied by the tooltip only cosmetically works, the javascript is still looking at the original. I even tried changing the class before I apply anymore javascript. Figuring if I changed the class the original element would no longer be accessible. The class changed, but the javascript was not applied to what was inside the tooltip.

Is there a good way remove a div once it has been copied, or a better method of finding/targeting the correct element.

$(this).find("div.scroll").test();

EDIT:

...Before...
    <div id="main-content" class="scroll">
    <div class="Content"> 

...After...

<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
    <div id="main-content" class="scroll">
    <div class="Content"> 
    ....

The this was a part of the enter callback for the tooltip library:

 var tip_html = $('.tooltip-html').html();
    $('.tooltip').tipTip({ content: tip_html, enter: function(){
        $(this).find("div.scroll").test();

    }

Also tried using,

$("#main-content.scroll", "#tiptip_content").test();

UPDATE:

As people mentioned naming the parent div like I was should of worked, here’s an example of how i’m not able to target inside the tooltip.

jsfiddle.net/mstefanko/pUm5V/24

//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");

Blue doesn’t work, red does. I feel like both lines should work.

Answer 1

Found the main cause of my issue. The following lines in the plugin:

function active_tiptip(){
    opts.enter.call(this);        
    tiptip_content.html(org_title);

the enter call was being called before any of the tooltip content was in the DOM, as much as the wrappers for the tooltip existed, calling main-content when it wasn’t in the tooltip yet will obviously fail to work. Not sure i’ve completely solved my issue, but reversing these lines fixes the question at hand.