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


jsfiddle here

i'm trying add tooltips existing page. use bootstrap 2.3 seemed obvious choice.

my html looks 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 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 mouseover button, tooltip displayed wanted first time, styling on button appears change - can see jsfiddle - how can stop happening?

edit: prefer solution doesn't involve totally changing way page laid out (i.e. 'just remove 'display:block container element' much less straightforward solution simplified jsfiddle make appear ) - solution doesn't modifying html ideal.

delete display: table; .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>

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more