Menu
Tooltips can be enabled via JavaScript — just call the tooltip() Bootstrap method with the id , class or any CSS selector of the target element in your JavaScript code. You can either initialize tooltips individually or all in one go.
To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.
As you may know, the Twitter bootstrap tooltips are not accessible (I.E. they are not being read by screen readers).
To trigger a tooltip to show up you need to use the 'show' option of the tooltip. Here is an example. Replace #element with your own selector.
To sum up: activate your tooltips using jQuery selectors
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
In fact, you don't need to use the attribute selector, you can invoke it on any element even if it doesn't have rel="tooltip" in its tag.
After experiencing the same problem, I found this solution worked without having to add additional tag attributes outside of the Bootstrap required attributes.
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
Hope this helps!
You don't need all js files separately
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
both of them can be found in http://twitter.github.com
and finally
-Latest version of jquery.js
For Glyphicons you need the image
glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images)
which you need to upload inside /img/ folder of your website (or) store it where ever you want but change the folder directory inside the bootstrap.css
For tooltip you need the following script inside your
<head> </head> tag
<script type='text/javascript'>
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
</script>
That's it...
http://getbootstrap.com/javascript/#tooltips-usage
Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning
you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
putting this piece of code in your html allows you to use the tooltips
Examples:
<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
This one is work for me.
I know this is an old question, but since I had this problem with the new release of bootstrap and its not clear on the website, here is how you enable the tooltip.
give your element a class like "tooltip-test"
then activate this class in your javascript tag:
<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>
<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With