0

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 :)

Lach
  • 3
  • 2

1 Answers1

1

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.

Cris P
  • 406
  • 2
  • 9
  • *Face Slap* The difference between knowing and not knowing something so simple. Cris, you wouldn't happen to know how I could centralise the content would you? Thanks again mate. Thanks so very much Cris. Much appreciated. – Lach Jan 25 '17 at 15:39
  • There are different ways to center things, with different effects depending on what you want to center and what the centering is relative to. Try text-align: center style on the divs that have text in them. You can also do sophisticated things with margin-left and margin-right, using "auto" or percentages. – Cris P Jan 26 '17 at 20:37