在jQuery工具提示函数中添加一个链接

我一直在寻找一段时间，也许我没有使用正确的术语，但我正在试图找出如何在jQuery工具提示中放置一个链接，所以当它弹出时，我可以显示一个菜单它。 我可以在标题中写出标题，例如title="">

这是我目前用于工具提示的内容

  $(function() { $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "
" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); 

Answer 1

如果要将内容动态插入工具提示，可以订阅工具提示的“打开”事件。

http://jsfiddle.net/PagNg/

例：-

 $( "a" ).tooltip({ open: function( event, ui ) { $(ui.tooltip).append('google'); } }); 

Answer 2

如果用户将元素hover，jQueryUI工具提示不会停留。

添加到jQueryUI工具提示的链接首先是一个坏主意，因为用户将无法单击它（除非你真的很快）

Answer 3

如果您需要更复杂的工具提示， title属性很可能无法满足您的需求。 以下是一些建议：

自己构建它

在你的dom中的某个地方有一个隐藏的div，用它来代替标准的工具提示。 使用jQuery显示它并将其放置在需要的地方。 如果您愿意，可以与jQueryUI的内容选项一起使用。

 
 
 
 .... 
  

使用其他工具提示插件

这里有25个不同的工具提示，其中一些允许您在工具提示中放置任何您喜欢的内容。 http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/

Answer 4

工具提示的原生设计依赖于不同的假设，因此您需要的行为（允许用户单击其内容的粘性工具提示）不受官方支持。

无论如何看这个链接你可以看到使用jQuery Tools实现你需要的东西是可能的：

http://jquerytools.org/demos/tooltip/any-html.html

这是一个独立的演示

http://jquerytools.org/demos/tooltip/any-html.htm

Answer 5

您可以对指针事件发表以下注释 –

 div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; /* pointer-events: none; This line needs to be removed */ }