bootstrap 弹框中渲染生成的tooltip换行问题以及样式问题

一、实现效果

二、实现过程的坑

1.动态添加tooltip不生效

由于弹框内容和划过显示的数据都是动态渲染上的，所以原始的写法不生效，需要一下方法解决

 // 动态添加的元素 不生效
 // $("[data-toggle='tooltip']").tooltip();

 // 动态添加的元素 生效
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    });

参考文章：
Bootstrap3动态添加的元素tooltip不生效_bootstrap tooltip 动态 无效_秀强的博客-CSDN博客

2.tooltip不支持换行

解决方法1：

（我一开始尝试了这个方法，但是觉得不完美。后端数据返回的是带有\n的换行符，通过修改标签pre的确可以正确显示，但是修改了Js源码会影响其他页面；于是直接采用的方法2，写在下面，直接通过css就可以控制。）

参考文章：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了。

bootstrap学习笔记 - 提示框(tooltip)

解决方法二：

既然通过修改pre标签可以生效，那么也可以通过设置css属性类似于pre标签的功效；于是我用了white-space:pre-wrap；换行符虽然生效了，但是过长的文本没有换行符切割的部分就不会自动换行还会出现滚动条。于是我用white-space:pre-line；解决了这一难题。这个属性既可以识别换行符，还可以超出宽度自动换行，就很完美。

（标签。nowrap    文本不会换行，文本会在在同一行上继续，直到遇到  标签为止。pre-wrap    保留空白符序列，但是正常地进行换行。pre-line    合并空白符序列，但是保留换行符。inherit    规定应该从父元素继承 white-space 属性的值。）

2.代码

代码如下（示例）：
 

//放在tooltip容器内的属性及数据
data-html="true"  data-placement="right"  data-toggle="tooltip" title=" <span>'+val.name+'</span> </br></br>  '+val.desc+'">'+val.name + '<span class="more_count">'+val.count+ '</span>

.tooltip.right .tooltip-arrow {border-right-color: #fff;}
.tooltip{left: calc(50%-500px) !important;}
.tooltip-inner{text-align: left !important;display: inline-block !important;border: 1px solid #003594;background: #fff;background-color: #fff;color: #333;padding:10px;max-width: 500px !important;white-space:pre-line !important;font-size: 14px;}
.tooltip-inner span{color: #333;font-weight: 900;}
.tooltip .arrow::before {border-color: #FFFFFF;}
.tooltip_title{font-weight: bolder;}

---

总结

以上就是在使用bootstrap中的tooltip遇到的问题。