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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
javascript中this关键字详解
Dec 12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
FCK调用方法..
2006/12/21 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
python实现批量监控网站
2016/09/09 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python3.6的venv模块使用详解
2018/08/01 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
元旦联欢会主持词
2014/03/26 职场文书
电视节目策划方案
2014/05/16 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
超市主管竞聘书
2015/09/15 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书