Question

I want to clone question mark with title. Everything works but when I hover over new question marks tooltip appears on first question mark. Any idea?

I am using jQuery and tipsy tooltip.

Demo here

<div id="me">click here</div>
<ul id="cloneme">
    <li>
        <p class="help-mark" original-title="it's me tipsy">?</p>
    </li>
</ul>


$('#me').on('click', function(){
    $('ul#cloneme li:first-child').clone(true).appendTo('ul#cloneme')
})

$(".help-mark").tipsy({      
            fade: true,
            offset: 10,
            opacity: 1,
            gravity: 'nw'
      });

Demo

Was it helpful?

Solution

What you need to do is to not use clone (for the reasons mentioned by Kierchon above), but rather just create a new <li> element and append it to the <ul>.

jsFiddle here

This works:

$('#me').on('click', function(){
    $('ul#cloneme').append('<li><p class="help-mark" original-title="another one">?</p></li>');
    $(".help-mark").tipsy();
});

$(".help-mark").tipsy({      
    fade: true,
    offset: 1,
    opacity: 1,
    gravity: 'nw'
});

Isaac (OP) suggested this modification - a great idea:

$('#me').on('click', function(){
    $('ul#cloneme').append($('ul#cloneme li:first-child').html());
    $(".help-mark").tipsy();
});

OTHER TIPS

I assume that you have multiple questions with unique IDs for each of them.
In this case your problem is that you are calling the tipsy hover by the calss attribute, but you have to use the id. cause every of these questions has the same class name help-mark so when calling the tipsy, the first object with this class name will be invoked.

so your code should look like this:

<div id="me">click here</div>
<ul id="cloneme">
    <li>
        <p class="help-mark" id="the_question_id" original-title="it's me tipsy">?</p>
    </li>
</ul>

and then use the id instead of class like this:

$("#the_question_id").tipsy({      
        fade: true,
        offset: 10,
        opacity: 1,
        gravity: 'nw'
  });

and the the_question_id should be the ID of that question

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top