码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap Tooltip换行问题

时间:2016-11-27 20:01:20      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:tool   padding   通过   tar   自身   框架   html   tooltip   数据   

bootstrap自身带有tooltip,使用起来很方便,但是美中不足,它的tooltip并不支持换行。
比如我们通过<textarea>输入框传入到数据库的长文本,文本是带有换行符的,但是一旦使用tooltip将它展示出来,换行效果就不见了。
实际上,这解决起来并不难。
在bootstrap.js中,查询tooltip,先找到控制tooltip的代码大概在哪块,然后阅读。
会找到这样一段代码:
Tooltip.DEFAULTS = {
animation: true,
placement: ‘top‘,
selector: false,
template: ‘<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>‘,
trigger: ‘hover focus‘,
title: ‘‘,
delay: 0,
html: false,
container: false,
viewport: {
selector: ‘body‘,
padding: 0
}
}
稍作调试,发现这确实是对tooltip的配置。
然后将:
template: ‘<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>‘,
修改为:
template: ‘<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><pre class="tooltip-inner"></pre></div>‘,
也就是将原本用div标签包裹的内容,替换成用pre标签包裹,测试一看,确实OK了。
 
对于一些框架的使用者来说,往往因为框架的代码复杂而且多,出现了问题之后不会或者不愿意去排查框架的问题。其实只要静下心去看,多数问题都是能解决的。

bootstrap Tooltip换行问题

标签:tool   padding   通过   tar   自身   框架   html   tooltip   数据   

原文地址:http://www.cnblogs.com/east2-100/p/6106974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!