30

所以，我想获取我有几个 div 的内容<br/>，然后使用 jQuery 工具提示小部件将其作为标题属性传递。我希望这些线条出现在工具提示内的另一个下方。谢谢。到目前为止的代码是：

CSS

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>
4

8 回答 8

63

有一个纯 CSS 解决方案。使用 \n 换行，并添加此 CSS 样式：

.ui-tooltip {
    white-space: pre-line;
}

如果要保留空格，也可以使用 pre 或 pre-wrap 代替 pre-line。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

于 2014-08-28T08:37:56.383 回答
17

只需将实体&#10;用于标题属性中的换行符。

于 2013-01-30T08:35:14.417 回答
15

这是我用最新的 jquery / jqueryui 来做的技巧（假设你想要工具提示的所有项目都有类'jqtooltip'，它们有标题标签，并且标题有一个管道字符作为行分隔符：

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});
于 2013-04-18T20:33:18.703 回答
10

您可以使用工具提示小部件的“内容”选项。也可以看看：

http://jqueryui.com/tooltip/#custom-content

简短的例子：

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });
于 2013-01-30T08:34:34.300 回答
7

您可以将 HTML 直接输入到 Title 属性中，然后简单地调用以下命令：

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

这样，您的 HTML 将被呈现，而不是被转义和字面书写。

于 2013-10-02T08:41:45.280 回答
3

更好地使用这个：

$(document).tooltip({
   content: function () {
     return $( this ).prop( 'title' ).replace( '|', '<br />' );
   }
});

我有function(callback)一个工具提示问题，它没有关闭

于 2014-03-12T14:47:56.193 回答
2

我用这个：

        $("[title]").each(function(){
            $(this).tooltip({ content: $(this).attr("title")});
        });

这意味着所有具有 title 属性的元素都将使用 jquery 工具提示，并且工具提示内容将使用 title 属性的值。内容允许html。

于 2013-06-10T12:36:25.333 回答
2

我选择了 ScottRFrost 答案的修改版本。他的示例的问题是 .replace 仅替换字符串中字符的第一个实例。这是一个修改后的版本，它将使用正则表达式的 /g （全局）来修改整个字符串中字符的所有实例。

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});
于 2013-11-08T17:45:11.980 回答