Question

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

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>

Answer 1

有一个纯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

Answer 2

这是我用最新的jquery / jqueryui做的伎俩（假设你想要工具提示的所有项目都有类＆＃39; jqtooltip＆＃39;，它们有标题标签，并且标题有一个管道字符行分隔符：

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

Answer 3

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

Answer 4

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

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

简短的例子：

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });

Answer 5

您可以直接在“标题”属性中键入HTML，然后只需调用以下内容：

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

这样就可以呈现HTML而不是转义和字面编写。

Answer 6

更好地使用它：

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

function(callback)我的工具提示存在问题，但是并未关闭

Answer 7

我用过这个：

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

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

Answer 8

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

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});

jQuery工具提示添加换行符

8 个答案: