Bootstrap 自定义Tooltips背景色样式等

一、需求

     展示title,但是使用指定的样式

二、解决方案

    网上查询了一下，原有的title不能更改样式，可以使用css hover(参考文档：模拟title自定义样式 - 野望之风 - 博客园)或者 js mouseover事件等（参考文档：html里面修改title样式_weixin_33859231的博客-CSDN博客）等方法模拟，有点麻烦，并且我有多处需要，并且是动态的，再加上我原有的是Bootstrap 框架，因此采用Tooltips来解决

三、解决步骤

      1、引用下载bootstrap.bundle.min.js（引用网址的会报错，展示还未找到原因）

      2、使用原有的 Tooltips配置，不显示，需要初始化

               $('[data-toggle="tooltip"]').tooltip()

     3、原有样式不符合要求，使用参数template

          '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner">                  </div></div>'

            但是修改tooltip-inner的背景颜色、字体等添加Bootstrap的的类，添加行内样式不行，本打算就这样，但是arrow的颜色无法修改，写到样式表里也不行，在网上搜索的发现了此文档（遇到的问题之BootStrap-Tooltip动态显示 - 灰信网（软件开发博客聚合）），才想起来原生的也可以修改，脑子一时短了路，照抄没有效果，在浏览器中无法检查样式，因为鼠标一移开，Tooltips会消失，后发现检查的时候右击一下鼠标，可以固定住审查样式后，修改样式如下：
           .tooltip-inner {
           background-color: lightgray;
             color: black;
            font-weight: 700 !important;
           }
       .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
         border-top-color: lightgray;
           }
         .tooltip.show {
          opacity: 0.9;

         后发现Tooltips的title无法换行，查看官方文档，是要设置html为true才行，最终解决

           html代码如下：

           <template id="tooltip">
             <div  class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner " >                 </div></div>
            </template>

           js如下：

            

              $('#cardRate' + storeDash.gaugeType[i][0]).tooltip('dispose');
                $('#cardRate' + storeDash.gaugeType[i][0]).tooltip({
                    toggle: "tooltip",
                    placement: "top",
                    title: '% change of <br/>' + storeDash.lastParam.crtName + ' vs ' +                          storeDash.lastParam.lspName,
                    template: $('#tooltip').html(),
                    html: true,

                });