Bootstrap - 修改 tooltip 樣式

2015-06-19 9:10 PM

Bootstrap 堪稱是工程師的一大福音

這是一款由 Twitter 發佈的 CSS Framework

可以讓網頁版面製作更加輕鬆與簡便

本次要介紹的是其中的客製化功能

若要使用其中的 tooltip 元件，卻又不想使用原生的顏色

例如背景顏色已經是暗色系了

使用原生的黑色 tooltip 根本就看不到

這時就可以使用以下方式修改 tooltip 的樣式

程式碼範例

// 更改背景色及文字顏色

.tooltip > .tooltip-inner {background-color: #F7F7F7; color: #333333;}
.tooltip.left .tooltip-arrow { border-left-color: #F7F7F7; }
.tooltip.top .tooltip-arrow { border-top-color: #F7F7F7; }
.tooltip.right .tooltip-arrow { border-right-color: #F7F7F7; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #F7F7F7; }


// 若僅要修改指定容器內的tooltip樣式 則使用以下方法

#map .tooltip > .tooltip-inner {background-color: #F7F7F7; color: #333333;}
#map .tooltip.left .tooltip-arrow { border-left-color: #F7F7F7; }
#map .tooltip.top .tooltip-arrow { border-top-color: #F7F7F7; }
#map .tooltip.right .tooltip-arrow { border-right-color: #F7F7F7; }
#map .tooltip.bottom .tooltip-arrow { border-bottom-color: #F7F7F7; }

// 並在初始化tooltip時將container設為#map

editBtn.tooltip({
 animation : true,
 placement : "top", 
 html : false,
 title : "Edit hotspot",
 container : "#map"
});

各項資料連結

Bootstrap