Bootstrap Tooltip(提示工具) 插件 如何修改默認CSS樣式?

　　首先,要說一句,tooltip插件真的很好,很好用!

　　使用方法本文不介紹,因為不是要討論的重點.請參照別處.

　　本文的套路重點是:樣式,css樣式.

　　

　　下圖是插件的默認樣式.由2部分構成:

　　　　1.小三角區域;

　　　　2.氣泡區域.

　　

　　在顯示的內容較少的時候,一切OK,沒問題.但是一旦要顯示很多很多的內容,而氣泡又很小,就會出現窄窄的/長長的豎長型提示框.

　　好吧,這很難看!

 

　　幸好可以自定義修改,方法如下:

　　tooltip的樣式默認是黑背景白色字體，涉及到的html代碼就只有這些：

　　

<div class="tooltip fade bottom in" role="tooltip" id="tooltip508853" style="top: 118px; left: 734.703px; display: block;">
    <div class="tooltip-arrow" style="left: 50%;"></div>//下邊的三角形
    <div class="tooltip-inner">show</div>//顯示的字體
</div>

 

 

　　我們知道html標簽和它們的類名之后，要修改樣式就比較簡單了：

　　

.tooltip-inner{
   background: #fafafa !important; /*修改背景色*/
   text-align: left !important;/*字體左對齊*/
   color:#363636 !important;/*字體顏色*/
   border:1px solid #dedede;/*添加boder*/
   width: 200px;　　/*提示框的寬度增大*/
   max-width: 400px !important;//修改寬度
}
.tooltip-arrow{
   border-bottom-color: #ffffff !important;//修改三角形的顏色
   opacity: 0;//三角形透明
}
.tooltip{
   opacity: 1 !important;//讓整個tooltip不透明
}

 

這里提供了一個白底黑字的例子,大家喜歡的自己去用,但是我覺得不怎么好看,沒有原生的黑底白字好看.

主要是框框變寬了,內容較多的時候,行數就會減少.目的達成!