CODEWITHSUNDEEP
wordpresstooltipster
Lach
Lach

Reputation: 3

Tooltipster not working for element twice on single page

This is my first time here. Hoping you guys will be able to help. I'm not very adept at programming mind you.

So I'm using http://iamceege.github.io/tooltipster/

I've got this to work with an image where hovering over this image causes a simple tooltip to pop up with a number in it. Now, this image is repeated twice on a single page: once in a carousel at the top of the page, and again in another carousel below this top one. And yet, while it works for the top one, it doesn't work for the second! I just can't understand why.

My code is simple enough:

jQuery(document).ready(function($){
$('#apd001').tooltipster({
                theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
                animation: 'grow',
                delay: 10,
                distance: 1,
                maxWidth: 115
                })
        .tooltipster('content')
});

Here's my code:

<div class="rate-con">
    <div class="rate-excerpt">Writing Here</div>
    <div class="rating3"></div>
    <div class="apd101" id="apd101" title="Whatever Title"></div>
</div>

Any ideas guys?

Thanks in advance.

P.s. - Like I said, not very good with jquery so please kindly elaborate in ABC steps :)

Upvotes: 0

Views: 147

Answers (1)

Cris P
Cris P

Reputation: 433

The fault appears to be in the use of element "id" versus "class".

Your call $('#apd001').tooltipster( ... ) applies to the "id" apd001. Unfortunately for you, fetching by "id" only returns one element. (This is a feature of the DOM, not just JQuery.)

So change the call to $('.apd001').tooltipster( ... ), and I think you will succeed. The selector beginning with "." refers to every element with class apd001, and so should apply to both of your occurrences.

Upvotes: 1

Related Questions