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”替换成”<br/>”,我也是这么做的,可惜这在Tooltip中不管用。Tooltip直接把”<br/>”当作文字显示出来了。

也就是说,HTML在Tooltip中没有起作用。好在我找到了data-html属性,可以使得在Tooltip中使用HTML,让”<br/>”起作用。加上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起作用后,再做左对齐就简单多了,将要显示的内容放在<p align='left'>...</p>中。

<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>

无论什么原因,如果<p align='left'>不管用,还有很多选择:

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

总结

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

相关文章

  • js异或运算符^小技巧分享

    js异或运算符^小技巧分享

    这篇文章主要介绍了js异或运算符^小技巧,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 如何使用pdf.js展示pdf文件(亲测可用)

    如何使用pdf.js展示pdf文件(亲测可用)

    这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 老生常谈JavaScript 函数表达式

    老生常谈JavaScript 函数表达式

    下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 删除javascript所创建子节点的方法

    删除javascript所创建子节点的方法

    这篇文章主要介绍了删除javascript所创建子节点的方法,涉及javascript针对页面节点元素的操作技巧,需要的朋友可以参考下
    2015-05-05
  • MvcPager分页控件 适用于Bootstrap

    MvcPager分页控件 适用于Bootstrap

    这篇文章主要为大家详细介绍了MvcPager分页控件,修改后适用于Bootstrap,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript正则表达式之分组概念与用法实例

    javascript正则表达式之分组概念与用法实例

    这篇文章主要介绍了javascript正则表达式之分组概念与用法,结合实例形式分析了javascript正则表达式分组的功能、定义与使用方法,需要的朋友可以参考下
    2016-06-06
  • DWR内存兼容及无法调用问题解决方案

    DWR内存兼容及无法调用问题解决方案

    这篇文章主要介绍了DWR内存兼容及无法调用问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • Emberjs 通过 axios 下载文件的方法

    Emberjs 通过 axios 下载文件的方法

    这篇文章主要介绍了Emberjs 通过 axios 下载文件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 图片Slider 带左右按钮的js示例

    图片Slider 带左右按钮的js示例

    图片Slider的效果想必大家都有见到过吧,下面使用js简单实现下,喜欢的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • JS完成画圆圈的小球

    JS完成画圆圈的小球

    本文主要介绍了JS完成画圆圈的小球的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论