支持新行的JQuery工具提示

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

感谢您的帮助

我通常使用

---

您可以在tipsy中添加任何html元素，因此

可以正常工作

您只需按如下方式传递

html

选项：

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

如果您不想使用

title

属性来显示html（在这种情况下不会验证），可以使用

fallback

选项

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

$（“#示例回退”）.tipsy（{回退：“我的工具提示在哪里？”
耶！}）；

.

大多数浏览器（不是Firefox或Opera-）都支持

title

属性中的换行符

如果插件没有将它们呈现为

，请先在文本中执行此操作

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

var-tooltip=$（“#无论什么”）.attr（'title'）.replace（/\n/g，“
”）；

---

。。。然后将

工具提示

传递到工具提示库（例如）。

是一个很好的工具提示，用于管理需要保存更多内容的工具提示

简单自定义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();
      }
    );
  }
});

$.fn.extend({
myToolTip:function（）{
这个，悬停(
//鼠标在。。。
函数（）{
var$this=$（this）；
如果（$this.attr（“title”））{
$this.data（“$tooltip”，$（“”）
.text（$this.attr（“标题”））
.html（函数（i，html）{返回html.replace（/\n/g，“
”）；}）
.css({
位置：“绝对”，
顶部：$this.position（）.top+$this.outerHeight（），
左：$this.position（）.left
})
.附件（“正文”）
);
}
},
//鼠标出。。。
函数（）{
var$tooltip=$（this.data（“$tooltip”）；
如果（$tooltip）$tooltip.remove（）；
}
);
}
});

这将创建一个

（使用CSS设置样式），并将其放置在鼠标指针上相关元素的下方。鼠标移动时，工具提示再次被删除。元素的

标题

中的换行符将成为

中

的内容，其他所有内容将逐字显示

通过

$（.someElements”）.myToolTip（）调用扩展名
在jQuery 1.9（jQuery+jQuery ui）和标准工具提示功能中使用：

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

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

例如：

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

（？）
此代码使标题标记中的br工作

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

您可以使用以下示例：

$(document).ready(function(){

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

在标题中添加html标记“
”后：

title=text1<br/>text2

title=text1
text2
真的可以使用tipsy添加新行吗？@Nordis:您可以在tipsy中添加任何html。所以

起作用了。我的编辑中的更多细节如果属性值被正确编码，HTML代码应该完全验证……因此
应该验证并包含
“1
2”
作为标题属性值。@Tomalak:应该是，但由于我没有用tipsy测试它，我不能肯定地回答它。如果它有效，很好，否则，我给出了另一个选择：）我看不出qTip支持html或工具提示中的新行。我已经看过了所有的例子，没有一个使用多行。我需要插件从title属性获取内容。。无论如何，Thx。它很容易实现，只需在跳出设置上方的jquery.tooltip文件中添加“content=$（this）.attr（'title'）；”）即可。遗憾的是
Uncaught TypeError:Object[Object Object]没有方法“tooltip”
，也没有关于jquery文档中totip方法的内容。@Ajax源代码中是否附加了jquery和jquery ui？工具提示类是我在jquery ui（）中记得的，不，我知道，这是jquery ui函数，但在你的帖子中没有关于jquery ui的词：）@Ajax谢谢。这是唯一对我有效的答案。简单明了！我一直在寻找这个答案。像魔术一样工作！非常感谢！上帝保佑你！