Question 10893 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

adding a tooltip using data attribute but its not showing – Jquery

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search