bootstrap Tooltip换行问题

bootstrap自身带有tooltip，使用起来很方便，但是美中不足，它的tooltip并不支持换行。

比如我们通过<textarea>输入框传入到数据库的长文本，文本是带有换行符的，但是一旦使用tooltip将它展示出来，换行效果就不见了。

实际上，这解决起来并不难。

在bootstrap.js中，查询tooltip，先找到控制tooltip的代码大概在哪块，然后阅读。

会找到这样一段代码：

 1 Tooltip.DEFAULTS = {
 2  animation: true,
 3  placement: 'top',
 4  selector: false,
 5  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
 6  trigger: 'hover focus',
 7  title: '',
 8  delay: 0,
 9  html: false,
10  container: false,
11  viewport: {
12  selector: 'body',
13  padding: 0
14  }
15  }

稍作调试，发现这确实是对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了。

对于一些框架的使用者来说，往往因为框架的代码复杂而且多，出现了问题之后不会或者不愿意去排查框架的问题。其实只要静下心去看，多数问题都是能解决的。