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-22 16:50:42Z

2

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.

edited Mar 22, 2023 at 16:50

answered Mar 22, 2023 at 16:36

Marc

11.6k2 gold badges40 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SweetTooth Over a year ago

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

Marc Over a year ago

Yes. Add a change() event handler, which is documented here: api.jquery.com/change. And this answer shows you exactly how to check whether your checkbox is "checked" stackoverflow.com/a/7960219/1024832

Twisty · Accepted Answer · 2023-03-23 17:20:42Z

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.

Collectives™ on Stack Overflow

adding a tooltip using data attribute but its not showing

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related