在工具提示中添加换行符
Posted
技术标签:
【中文标题】在工具提示中添加换行符【英文标题】：Add line break within tooltips 【发布时间】：2011-03-21 10:14:58 【问题描述】：如何在 html 工具提示中添加换行符？
我尝试在工具提示中使用<br/> 和\n，如下所示：
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
但是，这没用，我可以在工具提示中看到文字文本 <br/> 和 \n。任何建议都会有所帮助。
【问题讨论】：
我也有同样的问题：***.com/questions/3320081/… 使用data-html="true"参考并感谢：***.com/a/19001875/2278891 在 asp.net (C# .NET 4.5 Framework) 中添加
Environment.NewLine 可以从代码端添加换行符...不用大惊小怪..不用麻烦...
下面的答案，由丹完美地工作。它在 CSS 中为该元素添加行空白，如下所示：.tooltip-inner white-space: pre-wrap;
【参考方案1】：
可以在原生 HTML 工具提示中添加换行符，只需将 title 属性分布在多行上即可。
不过，我建议使用 jQuery 工具提示插件，例如 Q-Tip：http://craigsworks.com/projects/qtip/。
设置和使用都很简单。或者，周围也有很多免费的 javascript 工具提示插件。
编辑：对第一条语句的更正。
【讨论】：
【参考方案2】：我找到了。只需这样做即可完成
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
【讨论】：
【参考方案3】：只需在标题属性中使用实体代码&#013; 换行即可。
【讨论】：
if 实体代码 不行，试试 我正在使用 linux 和 chrome 不确定其他浏览器 我试过了，当我使用inspect元素注入它时它可以工作，但当我将它包含在我的html中并用这个字符部署它时它就不行了。我可能会失踪的任何明显原因？ 我只使用了两个版本，&#013;&#010;，似乎工作得很好:)
在 Firefox v58 中不起作用。但是
确实可以正常工作。使用@Phe0nix 根据需要使用两个换行符的解决方案可以很好地使其在 Chrome、Microsoft Edge 和 Firefox 中工作。
这两个代码在我的 asp.net webform 应用程序中都不起作用，这种方法解决了这个要求。 data-toggle="tooltip" data-html="true" title="some string <br/> some string"【参考方案4】：
如果您使用 qTip，&lt;br /&gt; 确实有效
【讨论】：
【参考方案5】：如果您使用的是 Jquery Tooltip 实用程序，那么在“jquery-ui.js”Javascript 文件中找到以下文本：
tooltip.find(".ui-tooltip-content").html(content);
放在上面
content=content.replace(/\</g,'<').replace(/\>/g,'>');
我希望这也对你有用。
【讨论】：
【参考方案6】：&#013; 结合样式 white-space: pre-line; 对我有用。
【讨论】：
我花了一段时间试图让它工作。需要white-space: pre-line; 样式这一事实非常隐蔽。
@JimD 样式规则需要应用于什么类/元素？
对我来说，在工具提示上没有任何自定义 css 的情况下可以正常工作。
这是你要找的朋友。
其实字符应该是&#010;:***.com/questions/6502054/…【参考方案7】：
对我来说，两步解决方案（格式化标题和添加样式的组合）起作用，如下所示：
1) 格式化title 属性：
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2) 将此样式添加到tips 元素：
white-space: pre-line;
在 IE8、Firefox 22 和 Safari 5.1.7 中测试。
【讨论】：
我认为代码中有断行会很麻烦【参考方案8】：我的解决方案是http://jqueryui.com/tooltip/：
这里的代码（使<br/>工作的脚本部分是“内容：”）：
HTML 头
<head runat="server">
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
/*Position:
my => at
at => element*/
$(function ()
$(document).tooltip(
content: function()
var element = $( this );
if ( element.is( "[title]" ) )
return element.attr( "title" );
,
position: my: "left bottom-3", at: "center top" );
);
</script>
</head>
ASPX 或 HTML 控件
<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>
希望这对某人有所帮助
【讨论】：
【参考方案9】：这个 CSS 最终与我的编辑器中的换行符一起为我工作：
.tooltip-inner
white-space: pre-wrap;
在这里找到： How to make Twitter bootstrap tooltips have multiple lines?
【讨论】：
@Dan 来这里寻求帮助。我的工具提示文本在框外继续。这行得通！ +1【参考方案10】：Grater than Jquery UI 1.10 不支持在title属性中使用html标签，因为它不是有效的html。
因此，替代解决方案是使用工具提示内容选项。 参考-http://api.jqueryui.com/tooltip/#option-content
【讨论】：
【参考方案11】：在文本之间给出\n。它适用于所有浏览器。
Example
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
这对我有用，并且在后面的代码中使用。
希望这对你有用
【讨论】：
【参考方案12】：使用

应该没有 ;特点。
【讨论】：
【参考方案13】：javascript 版本
由于&#013;（html）是0D（十六进制），这可以表示为'\u000d'
str = str.replace(/\n/g, '\u000d');
另外，
与大家分享一个 AngularJS 过滤器，感谢 other answers 中的引用，用该字符替换 \n
app.filter('titleLineBreaker', function ()
return function (str)
if (!str)
return str;
return str.replace(/\n/g, '\u000d');
;
);
用法
<div title=" message | titleLineBreaker "> </div>
【讨论】：
【参考方案14】：如果您使用的是 jquery-ui 1.11.4：
var tooltip = $.widget( "ui.tooltip",
version: "1.11.4",
options:
content: function()
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
Replace--> //return $( "<a>" ).text( title ).html();
by --> return $( "<a>" ).html( title );
,
【讨论】：
【参考方案15】：只需添加一个数据属性
data-html="true"
你可以走了。
例如。用法：
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> ***"> </i>
到目前为止，它在我尝试过的大多数工具提示插件中都有效。
【讨论】：
标题文本中带有 的 data-html="true" 效果很好。 以上解决方案都不适合我。但是这个很好用。 我相信在“”之前缺少一个“>”我试图编辑自己，但“编辑队列”已满。 这不需要引导程序吗？ OP 正在使用<title>
对我不起作用。角 10。【参考方案16】：
只需添加 data-html="true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
【讨论】：
【参考方案17】：\n
造型
.tooltip-inner
white-space: pre-line;
为我工作。
【讨论】：
【参考方案18】：AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
uib-tooltip、uib-tooltip-template 和 uib-tooltip-html
- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
就我而言，我选择了 uib-tooltip-html，它包含三个部分：
-
配置
控制器
HTML
示例：
(function(angular)
//Step 1: configure $sceProvider - this allows the configuration of $sce service.
angular.module('myApp', ['uib.bootstrap'])
.config(function($sceProvider)
$sceProvider.enabled(false);
);
//Step 2: Set the tooltip content in the controller
angular.module('myApp')
.controller('myController', myController);
myController.$inject = ['$sce'];
function myController($sce)
var vm = this;
vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
'I am the second line-break');
return vm;
)(window.angular);
//Step 3: Use the tooltip in HTML (UI)
<div ng-controller="myController as get">
<span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>
更多信息，请查看here
【讨论】：
【参考方案19】：使用 .html() 而不是 .text() 对我有用。例如
.html("This is a first line." + "<br/>" + "This is a second line.")
【讨论】：
【参考方案20】：使用 &#13; 应该可以工作（我已经在 Chrome、Firefox 和 Edge 中进行了测试）：
let users = [username: 'user1', username: 'user2', username: 'user3'];
let favTitle = '';
for(let j = 0; j < users.length; j++)
favTitle += users[j].username + " ";
$("#item").append('<i title="In favorite users: ' + favTitle + '">Favorite</i>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>【讨论】：
【参考方案21】：只需在标题属性中使用实体代码&#xA; 换行即可。
<a title="First Line &#xA;Second Line">Hover Me </a>【讨论】：
【参考方案22】：只需在脚本中添加这段代码 sn-p：
$(function ()
$('[data-toggle="tooltip"]').tooltip()
);
当然，如上所述，data-html 应该是"true"。这将允许您在 title 属性的值内使用 html 标记和格式。
【讨论】：
+1，您的解决方案有效。我的示例代码：data-toggle="tooltip" data-html="true" title="some string <br/> some string" .
很高兴听到这个消息 ?【参考方案23】：
只需在标题中使用 \n 并添加此 css
.tooltip-inner
white-space: pre-wrap;
【讨论】：
【参考方案24】：这个 CSS 会帮助你。
.tooltip
word-break: break-all;
or if you want in one line
.tooltip-inner
max-width: 100%;
【讨论】：
【参考方案25】：您好，此代码适用于所有浏览器！！我使用过 用于 chrome 和 safari 中的新行以及用于 IE 的 ul li
function genarateMultiLIneCode()
var =values["a","b","c"];
const liStart = '<li>';
const liEnd = '</li>';
const bullet = '• ';
var mergedString = ' ';
const unOrderListStart='<ul>'
const unOrderListEnd='</ul>'
const fakeNewline = '
';
for (let i = 0; i < values.length; i++)
mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
const tempElement = document.createElement("div");
tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;
return tempElement.innerText;
【讨论】：
【参考方案26】：您可以使用引导工具提示，并且不要忘记将 html 选项设置为 true。
<div id="tool"> tooltip</div>
$('#tool').tooltip(
title: 'line one' +'<br />'+ 'line two',
html: true
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
【讨论】：
【参考方案27】：因此，如果您使用的是 bootstrap4，那么这将起作用。
<style>
.tooltip-inner
white-space: pre-wrap;
</style>
<script>
$(function ()
$('[data-toggle="tooltip"]').tooltip()
)
</script>
<a data-toggle="tooltip" data-placement="auto" title=" first line 
 next line" href= ""> Hover me </a>
如果您在 Django 项目中使用，那么我们还可以在工具提示中显示动态数据，例如：
<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto" title=" post.location 
 post.updated_on " href= "% url 'blog:get_user_profile' post.author.id %"> post.author </a>
【讨论】：
以上是关于在工具提示中添加换行符的主要内容，如果未能解决你的问题，请参考以下文章