Bootstrap Tooltip显示换行和左对齐的解决方案

更新时间：2017年10月11日 09:04:02 作者：front_end_fan

小编在使用Bootstrap的Tooltip功能时遇到一些小问题，换行丢失，文字不是左对齐。下面小编给大家介绍下Bootstrap Tooltip显示换行和左对齐的解决方案，感兴趣的朋友一起看看吧

今天在使用Bootstrap的Tooltip功能时遇到2个小问题：换行丢失，文字不是左对齐。然后经过百度和Bing找到了解决方案。

先看一下Bootstrap中展示Tooltip的代码：

<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="res/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip();
 });
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="${desc}"&gt;${title}</button>

注意这里${desc}和${title}是SpringMVC后台传过来的数据。

这是Bootstrap Tooltip最基本的代码，也就是会出现我说的两个问题。

换行问题

遇到换行，我们首先想到的是将”\n”替换成” ”，我也是这么做的，可惜这在Tooltip中不管用。Tooltip直接把” ”当作文字显示出来了。

也就是说，HTML在Tooltip中没有起作用。好在我找到了data-html属性，可以使得在Tooltip中使用HTML，让” ”起作用。加上data-html="true"后换行起作用了，看如下代码：

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "&lt;br/&gt;")}"&gt;${title}</button>

左对齐

基于HTML起作用后，再做左对齐就简单多了，将要显示的内容放在...中。

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="<p align='left'>${fn:replace(desc, newline, "&lt;br/&gt;")}&lt;/p&gt;"&gt;${title}</button>

无论什么原因，如果不管用，还有很多选择：

<style> 
 .tooltip > p {
  text-align:left;
 }
</style>
.tooltip-inner {
  text-align:left;
}

总结

以上所述是小编给大家介绍的Bootstrap Tooltip显示换行和左对齐的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

js异或运算符^小技巧分享
这篇文章主要介绍了js异或运算符^小技巧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
如何使用pdf.js展示pdf文件(亲测可用)
这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧
2023-10-10
老生常谈JavaScript 函数表达式
下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
删除javascript所创建子节点的方法
这篇文章主要介绍了删除javascript所创建子节点的方法,涉及javascript针对页面节点元素的操作技巧,需要的朋友可以参考下
2015-05-05
MvcPager分页控件适用于Bootstrap
这篇文章主要为大家详细介绍了MvcPager分页控件，修改后适用于Bootstrap，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
javascript正则表达式之分组概念与用法实例
这篇文章主要介绍了javascript正则表达式之分组概念与用法,结合实例形式分析了javascript正则表达式分组的功能、定义与使用方法,需要的朋友可以参考下
2016-06-06
DWR内存兼容及无法调用问题解决方案
这篇文章主要介绍了DWR内存兼容及无法调用问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
Emberjs 通过 axios 下载文件的方法
这篇文章主要介绍了Emberjs 通过 axios 下载文件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
图片Slider 带左右按钮的js示例
图片Slider的效果想必大家都有见到过吧，下面使用js简单实现下，喜欢的朋友可以参考下，希望对大家有所帮助
2013-08-08
JS完成画圆圈的小球
本文主要介绍了JS完成画圆圈的小球的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03