CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tooltip
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

jQuery custom content tooltip shows nothing

Following the tooltip tutorials from jQuery UI API I'm trying to create tooltips with custom html content, but nothing shows up. Console shows no errors with my script, only some from the jQuery-UI (but nothing special).

Can anyone please tell me what I'm doing wrong?

$(document).ready(function() {
  $(function() {
    $(document).tooltip({
      items: "custom-tooltip",
      content: function() {
        var element = $(this);
        if (element.is("custom-tooltip")) {
          return "<a>THIS<br/>IS<br/><A><br/>TOOLTIP!";
        }
      }
    });
  });
});
<!doctype html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>CUSTOM TOOLTIPS</title>

  <link rel="stylesheet" href="jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>

  <script src="tooltips.js"></script>

</head>

<body>

  <h3><a href="#" custom-tooltip="">HOVER ME</a></h3>

</body>

</html>

Upvotes: 0

Views: 179

Answers (2)

111
111

Reputation: 1779

See this JSFiddle. You make some mistake in you tool-tip settings. Tooltip items setting should be like this : items: "[custom-tooltip]" and why you are calling documenting ready function this way

$(document).ready(function() { -- document ready event
  $(function() { -- same document ready
    $(document).tooltip(...);
  });
});

jQuery code would be like:

$(function() {
    $(document).tooltip({
      items: "[custom-tooltip]",
      content: function() {
        var element = $(this);
        if (element.is("[custom-tooltip]")) {
          return "<a>THIS<br/>IS<br/><A><br/>TOOLTIP!";
        }
      }
    });
 });

Upvotes: 1

blgt
blgt

Reputation: 8205

The .is function requires a selector. To match an attribute if it exists, surround it in square brackets []:

    if (element.is("[custom-tooltip]")) {

Same with the items option:

     items: "[custom-tooltip]",

The rest of your code looks fine. Note that you probably don't need the if check at all since items will already restrict the widget to the same tags.

More info on valid selectors can be found in the documentation pages: http://api.jquery.com/category/selectors/

Upvotes: 1

Related Questions