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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php随机抽奖实例分析
2015/03/04 PHP
php限制文件下载速度的代码
2015/10/20 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
文本加密解密
2006/06/23 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
创业计划书——互联网商机
2014/01/12 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
学习雷锋活动总结
2014/04/29 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
公司催款律师函
2015/05/27 职场文书
家装电话营销开场白
2015/05/29 职场文书
小学生家长意见
2015/06/03 职场文书
python 实现的截屏工具
2021/05/08 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
什么是css原子化,有什么用?
2022/04/24 HTML / CSS