jQuery 工具提示添加换行符

Posted 2023-05-08

【中文标题】jQuery 工具提示添加换行符

【英文标题】：jQuery tooltip add line break

【发布时间】：2013-01-14 00:09:34

【问题描述】：

所以，我想获取包含多个<br/> 的 div 的内容，然后使用 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>

【参考方案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

【讨论】：

迄今为止此页面上最简单的解决方案。

对我来说也是最简单的解决方案。我的文本已经包含 \n 所以我只需要 CSS。谢谢！

我的 Jquery Tooltip 版本的类选择器不同：` .tooltip-inner white-space: pre-line; ` 但原理相同！

【参考方案2】：

只需在标题属性中使用实体
 换行即可。

【讨论】：

我将如何在我的代码中具体实现它？我通过 jQuery 设置标题属性

在你想要换行的地方添加文本。或替换为 标签

我不知道你是否理解我最初的问题。我想获取 div [参见示例 div] 的内容并将其显示为带有 jQ​​uery 工具提示插件的标题。在那个 div 中我已经有 <br/> 并且我希望换行符出现在 <br/> 所在的工具提示中。

这只是我告诉的。你用 替换 yourVariable.replace("<br/>","
");

你必须和这个一起使用： .ui-tooltip white-space: pre-line;

【参考方案3】：

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

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

【讨论】：

这只替换第一个'|'。

【参考方案4】：

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

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

简短示例：

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

【讨论】：

你能举一个实际的例子，这将实现我的目标吗？谢谢

在您的情况下，字符串 'foo' 可以替换为 Iatext

【参考方案5】：

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

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

这样你的 HTML 被渲染而不是转义和字面书写。

【讨论】：

这就是答案。时期。请投票以将此答案移到顶部。

悬停后工具提示不会隐藏。

【参考方案6】：

最好用这个：

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

function(callback) 我遇到了工具提示问题，它没有关闭

【讨论】：

如果您有 1 个换行符，那就太好了。对于倍数，请务必使用全局选项。 .replace( /\|/g, '<br />' );

请查看此页面的 JDandChips 答案，无需使用自定义字符。您可以在 title 属性中使用 html，只需更改以下函数即可： return $( this ).prop( 'title');

【参考方案7】：

我用过这个：

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

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

【讨论】：

在用它设置标题属性之前，我必须在我的文本中将 /n 替换为 。但是现在我找到了一个更好的解决方案，我用

【参考方案8】：

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

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

【讨论】：

您也可以使用正则表达式模式，例如：.replace(/\|/g, '<br />')。