Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

Question

JSFiddle here

I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.

My html looks like this, say:

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

and my CSS looks like:

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

When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?

Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.

Answer 1

Delete display: table; from .my_button_row{ ... or add

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

You just have to give width: 500px; to my_button class and remove

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

Check out the fiddle

EDIT:

According to your requirement from the comments:

Adjusted the padding instead of giving width statically

Updated Fiddle