Question

我正在寻找一个轻量级的jquery插件，用于在用户将鼠标悬停在元素上时显示工具提示。我希望插件能够从title属性中获取内容，并且重要的是我可以创建新行。

感谢任何帮助！

Answer 1

我通常使用tipsy。

您可以在tipsy中添加任何html元素，因此<br/>可以正常工作。

您只需要传递html选项：

$('#example-html').tipsy({html: true });

如果您不想使用title属性来显示html（在这种情况下不会验证），您可以使用fallback选项。

$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'? <br/> yay !" });

More options and examples on the tipsy webpage

Answer 2

在jQuery 1.9（jquery + jquery-ui）和标准的toolTip函数中使用：

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

然后在标题中你可以使用HTML的或。

示例：

<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

Answer 3

此代码使标题标签中的br工作正常！

$(document).tooltip({
    content: function() {
        var element = $(this);
        return element.attr("title");
    }
});

Answer 4

http://elliotlings.com/jquery/tooltip是管理需要保存更多内容的工具提示的好工具提示

Answer 5

大多数浏览器（不是Firefox或Opera - newlines will disappear）都支持title属性中的换行符。

如果您的插件未将其呈现为<br />，请先在文字上执行此操作...

var tooltip = $('#whatever').attr('title').replace(/\n/g, '<br />');

...然后将tooltip传递到您的工具提示库（例如qTip）。

Answer 6

简单的自定义jQuery扩展：

$.fn.extend({
  myToolTip: function() {
    this.hover(
      // mouse in ...
      function () { 
        var $this = $(this);
        if ($this.attr("title")) {
          $this.data("$tooltip", $("<div class='myToolTip'></div>")
            .text($this.attr("title"))
            .html(function(i, html) { return html.replace(/\n/g, "<br/>"); })
            .css({
              position: "absolute", 
              top: $this.position().top + $this.outerHeight(), 
              left: $this.position().left
            })
            .appendTo("body")
          );
        }
      },
      // mouse out ...
      function () {
        var $tooltip = $(this).data("$tooltip");
        if ($tooltip) $tooltip.remove();
      }
    );
  }
});

这会创建一个<div class="myToolTip">（使用CSS来设置样式）并将其放在 mouseenter 上相关元素下方。在 mouseleave 上再次删除工具提示。元素title中的换行符将在<br>的内容中变为<div>，其他所有内容都会逐字显示。

通过$(".someElements").myToolTip();调用扩展程序。

Answer 7

您可以使用此示例：

$(document).ready(function(){

  $(function () {
    $('[data-toggle="tooltip"]').tooltip({
        container : 'body',
        html: true
    });
  });
});

在标题内添加html标签“
”后：

title=text1<br/>text2

支持新行的JQuery工具提示

7 个答案: