添加bootstrap工具提示會修改元素本身的樣式 - 如何阻止這種情況發生？

Question

JSFiddle在這里

我正在嘗試將工具提示添加到現有頁面。 我們已經使用了bootstrap 2.3，所以它似乎是明顯的選擇。

我的HTML看起來像這樣，說：

<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();   
});

<div class="my_button_row">
<a href="www.google.com" data-placement='bottom' data-toggle="tooltip" title="Some helpful text here!" class="my_button my_button_green">buttonnnnn</a>    
</div>

我的CSS看起來像：

.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;    
}

.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB;  border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}


.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}

當鼠標懸停在按鈕上時，工具提示就像我第一次顯示一樣，但按鈕本身的樣式也似乎也發生了變化 - 正如你從jsfiddle中看到的那樣 - 我怎么能阻止這種情況發生？

編輯：我真的更喜歡一個不涉及完全改變頁面布局方式的解決方案（即'只需刪除'display：block from the container element'是一個不那么簡單的解決方案，而不是這個簡化的JSfiddle會讓它出現） - 不修改HTML的解決方案是理想的。

Answer 1

刪除display: table; 來自.my_button_row{ ...或添加

data-container="body" to

<a href="www.google.com" data-placement='bottom' data-container="body" data-toggle="tooltip" title="Some helpful text here!" class="my_button my_button_green">buttonnnnn</a>

Answer 2

你只需要給出width: 500px; 到my_button類並刪除

  //  max-width: 180px;
 //   min-width: 15%;

看看小提琴

編輯：

根據你的意見要求：

調整填充而不是靜態給出寬度

更新小提琴

Answer 3

添加display: block to .my_button 。

您將不得不擺弄邊距和填充以將文本放在按鈕的中心，但這將解決您的問題。 另外請記住，使用display: block ，由於你的max-width樣式，按鈕最多可以是180px寬。

Answer 4

這是因為您使用了display:table-cell css屬性作為按鈕，而工具提示被附加為display:block元素。

只需使用display:block for .my_button （或從.my_button_row刪除display:table屬性）就可以了

更新了小提琴