How to add a tooltip to every class?

Question

Is there a way to add a tooltip to every class of myClass on the page?

I have many divs with the same class, like so:

<div class="myClass">Div 1</div>
<div class="myClass">Div 2</div>
<div class="myClass">Div 3</div>
<div class="myClass">Div 4</div>

I need to give them all the same tooltip.

For example, pseudo code:

$(".myClass").tooltip({
    text: 'Tooltip Text'
});

Sorry if this has been asked before, couldn't seem to find it anywhere.

Answer 1

you mean to all classes that found on a page ?

<div class="myClass" title="Hello">...</div>
<div class="myClass" title="Hello">...</div>
<div class="myClass" title="Hello">...</div>
<span class="myClass" title="Hello">...</span>
<p class="myClass" title="Hello">.....</p>

or just any element with class '.myClass' ?

jquery tooltip takes all element with title

$(function() {
   $( ".myClass" ).tooltip();
 });

or this

  $(function() {

    $( ".myClass" ).tooltip({content:function(){

       return "My title"
     }
    });
 });

it will result this : try it

Answer 2

Jquery tooltip uses the title attribute. You need something like

$('.myClass').attr('title', 'my tooltip');
$('.myClass').tooltip();

Fiddle here

http://jsfiddle.net/sfarsaci/86DmG/