MDP MDP - 5 months ago 24x
HTML Question

How to pass variable to a Jquery function

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:

$(document).ready(function() {
content: $('<span>This text is in bold case !</span>')

<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


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() {
      content: $(this).attr("data-tooltip")
.tooltip {
  cursor: help;
.tooltipster-base {
  display: inline-block;
  border: 1px solid #222;
  margin: 0;
  padding: 2px 4px;
  background: #ccc;
<script src=""></script>
<script src=""></script>
<img class="tooltip" data-tooltip="I am a unicorn!" src="">
<img class="tooltip" data-tooltip="Look at me!" src="">
<img class="tooltip" data-tooltip="I poop rainbows" src="">