在使用bootstrap的tooltip功能时遇到一些小问题，换行丢失，文字不是左对齐。本文主要和大家介绍下bootstrap tooltip显示换行和左对齐的解决方案，感兴趣的朋友一起看看吧，希望能帮助到大家。
今天在使用Bootstrap的Tooltip功能时遇到2个小问题：换行丢失，文字不是左对齐。然后经过百度和Bing找到了解决方案。
先看一下Bootstrap中展示Tooltip的代码：
$(function () { $('[data-toggle="tooltip"]').tooltip(); });
登录后复制
注意这里${desc}和${title}是SpringMVC后台传过来的数据。
这是Bootstrap Tooltip最基本的代码，也就是会出现我说的两个问题。
换行问题
遇到换行，我们首先想到的是将””替换成”
”，我也是这么做的，可惜这在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, "
")}">${title}
登录后复制
左对齐
基于HTML起作用后，再做左对齐就简单多了，将要显示的内容放在
…
中。
<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "
">${title}
")}
登录后复制
无论什么原因，如果
不管用，还有很多选择：
.tooltip > p { text-align:left; }.tooltip-inner { text-align:left;}
登录后复制
相关推荐：
Vue组件之Tooltip实例详解
Vue组件之Tooltip实例详解
Vue组件之Tooltip实例详解
以上就是Bootstrap Tooltip显示换行和左对齐实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788946.html
