CODEWITHSUNDEEP
javascriptjqueryjquery-ui
abu abu
abu abu

Reputation: 7028

Using jQuery UI ToolTip

I am using jQuery UI ToolTip like below.

          $( document ).tooltip({
            position: {
              my: "center bottom-20",
              at: "center top",
              using: function( position, feedback ) {
                $(this).css(position);
                var txt = $(this).text();
                $(this).html(txt);
                $( "<div>" )
                  .addClass( "arrow" )
                  .addClass( feedback.vertical )
                  .addClass( feedback.horizontal )
                  .appendTo( this );
              }
            }
          });

My HTML code is like below.

'<span class="tooltip" title="'+ state.text2 +'">' + state.text + '</span>'

But in this way all the title of the page is showing as ToolTip.

How can I use jQuery UI ToolTip specifically on element with class="tooltip" ?

Upvotes: 1

Views: 1888

Answers (2)

Twisty
Twisty

Reputation: 30883

Consider the following.

$(function() {
  $(".tooltip").tooltip({
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>
  <a href="#" title="Anchor description">Anchor text</a>
  <input title="Input help">
  <br />
  <span class="tooltip" title="Text 2">Text 1</span>
</p>

Using the correct Selector, you can target Tooltips for specific elements.

Upvotes: 1

TopSkill
TopSkill

Reputation: 19

<!Doctype html>
<html lang = "en">
<head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tooltip Test</title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function () {
    $("#open-event").tooltip ({
      show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function (event, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position ().top + 10.}, "fast");
      }
    });
  });
  </script>
</head>
<body>
 
<p> Tooltip test <a id="open-event" href="#" title="tooltip-test"> test </a></p>
 
 
</body>
</html>

Upvotes: 2

Related Questions