I am using Twitter Bootstrap--and I am not a frontend developer! However, it's making the process almost--dare I say--fun!
I'm a bit confused about tooltips. They are covered in the documentation but Twitter assumes some knowledge. For example, they say to trigger the tooltip with the following JavaScript code.
$('#example').tooltip(options)
After poking around on their source, I realized that fields with tooltips need to be in a class and have the following code run.
$('.tooltipclass').tooltip(options)
But now my question is, why doesn't Twitter Bootstrap provide such a class tooltip? Just to allow greater configuration? Is it better to add the individual elements with tooltips to tooltipclass, or should I add the surrounding area to tooltipclass? Does it matter if I use a class identifier (.class) instead of a name identifier (#name)?
This question is related to
javascript
twitter-bootstrap
The easiest way to use this is
put this in the header:
<script>
$(function ($) {
$("a").tooltip()
});
</script>
and then
<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
My link text
</a>
so with that js code if you have tag any where in your page with rel="tooltip" get the bootstrap tooltip.
good luck.
Simply mark all the data-toggles...
jQuery(function () {
jQuery('[data-toggle=tooltip]').tooltip();
});
That's because these things (I mean tooltip etc) are jQuery plug-ins. And yes, they assume some basic knowledge about jQuery. I would suggest you to look for at least a basic tutorial about jQuery.
You'll always have to define which elements should have a tooltip. And I don't understand why Bootstrap should provide the class, you define those classes or yourself. Maybe you were hoping that bootstrap did automatically some magic? This magic however, can cause a lot of problems as well (unwanted side effects).
This magic can be easily achieved to just write $(".myclass").tooltip(), this line of code does exact what you want. The only thing you have to do is attach the myclass class to those elements that need to apply the tooltip thingy. (Just make sure you run that line of code after your DOM has been loaded. See below.)
$(document).ready(function() {
$(".myclass").tooltip();
});
EDIT: apparently you can't use the class tooltip (probably because it is somewhere internally used!).
I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.
The thing you want produces almost the same code as you have to do now. The biggest reason however they did not do that, is because it causes a lot of trouble. One person wants to assign it to an element with an ID; others want to assign it to elements with a specified classname; and again others want to assign it to one specified element achieved through some selection process. Those 3 options cause extra complexity, while it is already provided by jQuery. I haven't seen many plugins do what you want (just because it is needless; it really doesn't save you code).
Add this into your header
<script>
//tooltip
$(function() {
var tooltips = $( "[title]" ).tooltip();
$(document)(function() {
tooltips.tooltip( "open" );
});
});
</script>
Then just add the attribute title="your tooltip" to any element
Simple use of this:
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
tooltip
</a>
Using jQuery:
$(document).ready(function(){
$('#mytooltip').tooltip();
});
You can left side of tooltip u can simple add this->data-placement="left"
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>
I included the JS and CSS file and was wondering why it is not working, what made it work was when I added the following in <head>:
<script>
jQuery(function ($) {
$("a").tooltip()
});
</script>
Source: Stackoverflow.com