使用 jQuery UI 工具提示

Question

我正在使用 jQuery UI工具提示，如下所示。

          $( 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 );
              }
            }
          });

我的 HTML 代碼如下所示。

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

但是通過這種方式，頁面的所有title都顯示為 ToolTip。

如何在帶有class="tooltip"的元素上專門使用 jQuery UI ToolTip ？

Answer 1

<!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-1" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>

 <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-1" title = "Please use MM.DD.YY format.">

Answer 2

考慮以下。

 $(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>

使用正確的選擇器，您可以針對特定元素定位工具提示。