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


Posted in Javascript onOctober 11, 2017

今天在使用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}">${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, "<br/>")}">${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, "<br/>")}</p>">${title}</button>

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

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

总结

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

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 #Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 #Javascript
js处理包含中文的字符串实例
Oct 11 #Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
React根据宽度自适应高度的示例代码
Oct 11 #Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 #Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
You might like
PHP学习资料汇总与网址
2007/03/16 PHP
php实现图片缩放功能类
2013/12/18 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python三级菜单的实例
2017/09/13 Python
高效使用Python字典的清单
2018/04/04 Python
django使用LDAP验证的方法示例
2018/12/10 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
个人承诺书
2014/03/26 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
小学大队长竞选稿
2015/11/20 职场文书