How to pass variable to a Jquery function

Question

I'm new to JQuery, and I'm trying to use a function found on the internet that shows a tooltip when you over a HTML element.

This is the function:

<script>
$(document).ready(function() {
   $('#my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

<img src="img.jpg" id="my-tooltip">

Let's say that I want to apply this function to many elements on the page, for example:

  <img src="img1.jpg" id="my-tooltip1">
  <img src="img2.jpg" id="my-tooltip2">
  <img src="img3.jpg" id="my-tooltip3">

How should I edit the the function? I can't do

<img src="img.jpg1" id="my-tooltip1" onmouseover="javascript:functionName('tooltip1')" onmouseout="javascript:functionName('tooltip1')">

since ths function will not work the way it works now.

Thank you

Answer 1

As already suggested, use a CSS class to select your tooltip-enabled elements.

The text of the tooltip can be parametrized with a custom data- attribute.

 $(document).ready(function() { $('.tooltip').each(function() { $(this).tooltipster({ content: $(this).attr("data-tooltip") }); }); }); 

 .tooltip { cursor: help; height:100px; width:100px; } .tooltipster-base { display: inline-block; border: 1px solid #222; margin: 0; padding: 2px 4px; background: #ccc; border-radius:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script> <img class="tooltip" data-tooltip="I am a unicorn!" src="https://s-media-cache-ak0.pinimg.com/originals/e3/ab/d2/e3abd2c3b64151e4c1dfe59e5a2227dc.jpg"> <img class="tooltip" data-tooltip="Look at me!" src="http://cartoon-animals.disneyimage.com/_/rsrc/1367525874171/cartoon-unicorn-clipart/Unicorn-Clipart_7.png"> <img class="tooltip" data-tooltip="I poop rainbows" src="http://grid.turtlespeak.net/upload/LMo6pu2bZ3pYC5QU/iH3dtwYF1tOwoBd8/un1.png"> 

Answer 2

use "class" instead of "id", :

  <img src="img1.jpg" class="my-tooltip">
  <img src="img2.jpg" class="my-tooltip">
  <img src="img3.jpg" class="my-tooltip">

Your script will be like this :

<script>
$(document).ready(function() {
   $('.my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

Answer 3

Use a class to identify multiple elements which should behave in a similar manner:

 <script> $(document).ready(function() { $('.my-tooltip').tooltipster({ content: $('<span>This text is in bold case !</span>') }); }); </script> <img src="img.jpg" class="my-tooltip"> 

Notice I changed the selector to $('.my-tooltip')...

And then change the id attribute on the images to 'class'.

Answer 4

You can use html encoding in the title attribute, as described on the Getting Started page of tooltipster, or you can call tooltipster once for each image and assign a different text.

<script>
$(document).ready(function() {
   $('#my-tooltip1').tooltipster({
        content: $('<span>You can tip me</span>')
   });
   $('#my-tooltip2').tooltipster({
        content: $('<span>I would like to go boldly</span>')
   });
   $('#my-tooltip3').tooltipster({
        content: $('<span>Hello there</span>')
   });
});