添加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"到

<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>