Estoy usando jQuery UI ToolTip como se muestra a continuación.
$( 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 ); } } });Mi código HTML es como el siguiente.
'<span class="tooltip" title="'+ state.text2 +'">' + state.text + '</span>' Pero de esta manera, todo el title de la página se muestra como información sobre herramientas.
¿Cómo puedo usar jQuery UI ToolTip específicamente en el elemento con class="tooltip" ?
<!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>Considera lo siguiente.
$(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>Con el Selector correcto, puede orientar la información sobre herramientas para elementos específicos.