Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
How to use Tooltips (bootstrap-tooltip.js) and Popovers (bootstrap-popover.js)?
Tooltips
<a rel="tooltip" href="#" data-original-title="Tooltip text">lorem ipsum</a>
Popovers
<a data-content="Popover text" rel="popover" class="btn btn-danger" href="#" data-original-title="A Title">hover for popover</a>
I have no results, where is an error?
bootstrap-tooltip.js and bootstrap-popover.js are enabled in theme
Comments
Comment #1
marcheidemann CreditAttribution: marcheidemann commentedwhat did you wrote into your script?
<script>
Comment #2
marcheidemann CreditAttribution: marcheidemann commentedfirst of all: you copied the code from inspect, it should be
title
Comment #3
Stan.Ezersky CreditAttribution: Stan.Ezersky commentedThanks for question!
For Tooltips
For Popovers
Comment #4
Docc CreditAttribution: Docc commentedStan this is not the place to ask about help on implanting and usage of twitter bootstrap.
But if you would like people to help you then please give more info.
Drupal version, project version, JQuery version, any JS errors(important), etc.
It works fine over here so you probably got something wrong somewhere.
Comment #5
frankbaele CreditAttribution: frankbaele commentedComment #6
andregriffin CreditAttribution: andregriffin commentedComment #7
zdean CreditAttribution: zdean commentedIn reference to #4 above, my setup:
Drupal 7.22
Bootstrap 7.x-2.0-beta3
JQuery 1.7
I've set up a sub-theme. In my .info file, I've added:
scripts[] = bootstrapcustom.js
In my bootstrapcustom.js file, I've added:
In my html, I've added:
The result is a normal tooltip with the text (small yellow box with "hello"), not the Bootstrap style tooltip.
I'd be happy to turn this into a help doc if anyone can point me in the right direction for making it work.
Thanks!
Comment #8
markhalliwellThis is because you aren't wrapping your code in a $(document).ready() function. Also given the way Drupal works, it's loading the script at the top before the rest of the page has been rendered. So technically, there are no
<a/>
tags present yet when the script executes.Comment #9
MarcoPBazz CreditAttribution: MarcoPBazz commented#zdean
maybe I find out a solution:
$('a').tooltip();
})(jQuery);
at the bottom of html.tpl
Works for me, hope 'll be helpfull
Comment #10
dariogcode CreditAttribution: dariogcode commentedAccording to B3, the markup should include data-toggle, the my code looks like
Comment #11
henryhu CreditAttribution: henryhu commentedThe following code is working for me in B3:
Comment #12
markhalliwellYou wouldn't have to implement it manually if you didn't exclude the base theme's ./js/bootstrap.js.
Comment #13
Binu Varghese CreditAttribution: Binu Varghese commentedThe page @ http://getbootstrap.com/javascript/#tooltips says:
"For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself."
One way is to add the below script at the bottom of your theme's html.tpl.php (before the closing body tag)
(function($) { $(document).ready(function() { $('[data-toggle=tooltip]').tooltip(); }); })(jQuery);Comment #14
coreteamvn CreditAttribution: coreteamvn commentedFor me the example didnt work (using bootstrap 3) and the tooltip didnt show up in panels.
This worked:
<a class="btn btn-danger" href="#" data-toggle="tooltip" data-original-title="A Title">hover for tooltip</a>
Comment #15
sano CreditAttribution: sano as a volunteer commentedre: #12 - one must also not forget to turn on popovers and/or tooltips in the /admin/appearance/settings/ like your's truly forgot to do. Then no custom javascript insertion is necessary (if not removed as Marc mentions).