Question

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

中写出链接

以下是我目前提供的工具提示

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

Answer 1

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

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

Answer 2

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

自己构建

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

<div id="tooltip">
  <div class="tooltipText"></div>
  <div class="menu">
    ....
  </div>
</div>

使用其他工具提示插件

这里有25个不同的工具提示，其中一些可以让你在工具提示中放入任何你喜欢的东西。 http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/

Answer 3

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

http://jsfiddle.net/PagNg/

实施例： -

$( "a" ).tooltip({
  open: function( event, ui ) {
      $(ui.tooltip).append('<a href="http:\\www.google.com">google</a>');
  }
});

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 */

}

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

5 个答案:

自己构建

使用其他工具提示插件