CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Paul
Paul

Reputation: 3582

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

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.

Upvotes: 5

Views: 128

Answers (4)

Abhinav
Abhinav

Reputation: 8168

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

Upvotes: 1

Alex Coloma
Alex Coloma

Reputation: 636

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>

Upvotes: 2

nalinc
nalinc

Reputation: 7425

Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.

Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go

Updated fiddle

Upvotes: 0

Mike
Mike

Reputation: 4091

Add display: block to .my_button.

You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.

Upvotes: 0

Related Questions