遇到的问题之BootStrap-Tooltip动态显示

需求是提示内容为动态生成，同时拥有自己的样式

1.引入依赖的文件：

2.照着样例写一个元素用来显示Tooltip:

        Tooltip with HTML
      

data-placement:决定tooltip显示的方向 left/top/right/bottom

data-html:true表示title中的内容为html标签

title:如果不需要动态修改的话。可以直接赋值，然后初始化。这边默认为空

3.依照官网描述,可以通过下面这个方法初始化所有tooltip:(这边不需要,因为title为空)

$(function () {
            $('[data-toggle="tooltip"]').tooltip();
        })

4.增加一个按钮用来模拟添加提示内容

点击填充tooltip

绑定点击事件

$(function () {
            //$('[data-toggle="tooltip"]').tooltip();
            $('#btnClick').click(function(){
                $('#testBtn').attr('title','
11111111
2222222222
').tooltip('_fixTitle').tooltip('show');

            });
        })

先设置title属性的内容，再通过tooltip('_fixTitle')方法来将title解析成提示内容。Bootstrap3中为fixTitle。从https://stackoverflow.com/questions/34540990/cant-change-bootstrap-tooltip-title得知。测试是对的。

后面的tooltip('show')只是控制提示框显示，以看到嵌入的样式。嵌入内容如下：

 

主要是一个箭头arrow样式和tooltip-inner样式,改写下样式，（如果不起作用，检查下样式是不是在Bootstrap样式后面）

看下效果：

实现效果的过程中花了不少时间，总结一下。