如何在HTML工具提示中添加换行符?
我尝试在工具提示中使用<br/>和\n,如下所示:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
然而,这是无用的,我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。
如何在HTML工具提示中添加换行符?
我尝试在工具提示中使用<br/>和\n,如下所示:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
然而,这是无用的,我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。
当前回答
对我来说,两步解决方案(结合格式化标题和添加样式)是有效的,如下所示:
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中测试。
其他回答
Use

不应该有;的性格。
如果你用的是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>
Jquery UI 1.10不支持在标题属性中使用html标签,因为它不是有效的html。
所以另一种解决方案是使用工具提示内容选项。 参考- http://api.jqueryui.com/tooltip/#option-content
这个CSS是我在编辑器中与换行一起工作的最终结果:
.tooltip-inner {
white-space: pre-wrap;
}
在这里找到: 如何使Twitter引导工具提示有多行?
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,有三个部分:
配置 控制器 超文本标记语言
例子:
(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>
更多信息请点击这里