adding a tooltip using data attribute but its not showing

Question

I am using jquery UI and i am trying to show data attribute on the checkboxes

here is my html

<input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Monday" id="Monday">

and here it is the jquery COde i have

$(".checktip :checked").tooltip({
        "classes": {"ui-tooltip": "uitooltip"},
        "content": $(this).data("office")
    });

    $(".checktip").tooltip({
        "classes": {"ui-tooltip": "uitooltip"},
        "content": $(this).data("home")
    });

but on hover of the elements, it is not showing me anything, is something wrong here

Marc · Accepted Answer · 2023-03-22T16:50:42.580

The documentation for jQuery tooltip says it will display the text in the title attribute of the element to which it's applied. The element in your example doesn't have a title attribute, so there's nothing to display. That's why your tooltip doesn't show up.

In the example below, I added a title to your <input> element, so now the tooltip will show up when you hover.

$(document).ready(function() {
  $(".checktip :checked").tooltip({
    "classes": {
      "ui-tooltip": "uitooltip"
    },
    "content": $(this).data("office")
  });

  $(".checktip").tooltip({
    "classes": {
      "ui-tooltip": "uitooltip"
    },
    "content": $(this).data("home")
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Monday" id="Monday" title="Here's your tooltip!">
<label for="Monday">Hover over the input to show a tooltip</label>

If you want to programmatically change the title, you can use the jQuery .attr("title", "new value you want") function.

so it will never pick the data attributes values, this is kind of no use, is there a hack around it to have a different tooltip show on checked and unchecked — SweetTooth, Mar 22 '23 at 19:07
Yes. Add a `change()` event handler, which is documented here: https://api.jquery.com/change/. And this answer shows you exactly how to check whether your checkbox is "checked" https://stackoverflow.com/a/7960219/1024832 — Marc, Mar 22 '23 at 19:33

score 1 · Answer 2 · answered Mar 23 '23 at 17:20

Consider the following.

$(function() {
  $(document).tooltip({
    classes: {
      "ui-tooltip": "uitooltip"
    },
    items: ".item",
    content: function() {
      var el = $(this).find("input");
      if (el.is(":checked")) {
        return el.data("office");
      } else {
        return el.data("home");
      }
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="item">
  <input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Monday" id="Monday"> <label for="Monday">Monday</label>
</div>
<div class="item">
  <input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Tuesday" id="Tuesday"> <label for="Tuesday">Tuesday</label>
</div>
<div class="item">
  <input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Wednesday" id="Wednesday"> <label for="Wednesday">Wednesday</label>
</div>
<div class="item">
  <input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Thursday" id="Thursday"> <label for="Thursday">Thursday</label>
</div>
<div class="item">
  <input class="checktip" data-home="Working from Home" data-office="Working from Office" type="checkbox" name="Friday" id="Friday"> <label for="Friday">Friday</label>
</div>

This makes use of the content as a Function.

A callback which can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content.

This makes the tooltip more dynamic. It will not change when shown, yet after the check and once the mouse is moved back to the item.

adding a tooltip using data attribute but its not showing

2 Answers2