I am using Twitter's Bootstrap to implement tooltips. Currently, the tooltips appear above the link. I would like the tooltip to appear underneath the link. How would I go about doing this?
I am triggering the tooltip and it clearly states "bottom" but it doesn't want to work for me...
<script>$('#home').tooltip('hide bottom')</script>
$('#tooltip').tooltip({
placement : 'left',
title : 'first tooltip'
});
Use this inside <script> tags, or in a separate JavaScript file.
Assuming you're using the latest Bootstrap you would use the placement of "bottom". You can do this via the options when you create the tooltip: $("#tt").tooltip({placement: "bottom"}); or via the data attribute on the element: <span data-placement="bottom" ...>tooltip!</span> I believe.
You can find more information on the tooltip in the Bootstrap tooltip section.
on the bootstrap website they show options for the tooltips. one of the options is placement
which can be set to top, bottom, right or left.
so when you add the script for your tooltip put the option like this
$('#example').tooltip({placement: "bottom"})
Bootstrap tooltip has a "placement" option. You can set it to "bottom" like this:
$('#home').tooltip({
placement : "bottom"
});
See their official website for references (v.2.3.3) or (v.3).
Related
The tooltip breaks the width of td.
Please see this Fiddle snippet http://jsfiddle.net/zhoujiealex/1d1bm9kc/
I want to show tooltip when mouse hover on truncated text in table.
I refere this post Show Bootstrap Tooltip Over Truncated Text
The difference is that above post use a <div> embed in <td>.
In my current project, old codes used <td> directly.
The tooltip can show up, but it breaks the width of table. It's so wired.
No tooltip
tooltip shows:
Anyone can show me the right direction?
Just add container: 'body' in your code
$this.tooltip({
title: $this.text(),
placement: "bottom",
container: 'body'
});
Check this out: http://jsfiddle.net/zhoujiealex/1d1bm9kc/
Read More: http://getbootstrap.com/2.3.2/javascript.html#tooltips
You could use a or span tags inside td and apply tooltip/popover to it.
This will not break the tds of your table.
Or just use the built-in solution tooltip-append-to-body="true"
Please refer to this.
I am using Tipsy to generate tooltips of SVG circles generated though D3. My code is taken right from this example. Using this code, my tooltips show just fine when I hover over my circle objects:
$('.circles').tipsy({ title: 'My tooltip text' })
Is there a way to make tooltips show on page load rather than hover? I have tried using show, but this does not seem to work:
$('.circles').tipsy({ title: 'My tooltip text' }) // show tips on hover
$('.circles').tipsy('show') // show tips on page load?
Getting tipsy to show tooltips on page load seems possible in theory based on this example question; however, I can't figure out how to manipulate D3 to make this logic work. How can I make my tooltips show on page load and on hover?
Strangely - tipsy does not work well with a selector for each of these circles, so had to use JQuery each function to get it to work. You also have to set the option trigger: 'manual' in tipsy.
$('.circles').each(function() {
$(this).tipsy({
trigger: 'manual',
gravity: 'w',
html: true,
title: function() {
return 'My tooltip text';
}
});
$(this).tipsy('show');
});
Have a tooltip issue here. Hope somebody could help tweak the code a little bit.
I'm using the jQuery Tools for implementing a tooltip. I need tooltips to open from separate div where I can use any html code. So far I have just one tooltip to open:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("#download_now").tooltip({
offset: [5, 0],
effect: 'slide'
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
And it works fine except I need more tooltips added.
Could anybody help modifying the script so more tooltips could be added by their id?
Here is the JSFiddle with one tooltip (working)
Here is the JSFiddle with more tooltips (not working)
I'm sure there should be an easy fix. I'm just not a javascript specialist.
Thanks!
Ok i got it. I apologize, I thought you were using jquery-ui tooltip (which provide - according to me - better widgets than the lib you are using).
By reading the documentation i found that :
After this the element next to the trigger is being used as the tooltip
meaning that your tooltip contents (with html as you specified) need to be placed after the element on which you want a tootip, like this :
Lorem ipsum
<a id="download_now1" class="need_tooltip">
<strong>dolor sit amet</strong>
</a>
<div class="tooltip">
<p><strong>Some sample text</strong> with html within...</p>
</div>
Have a look in this jsFiddle.
If you can't put your tooltips contents directly after your elements i would suggest you to use jquery-ui which is more flexible to define tooltips contents.
EDIT to provide a jquery-ui version
jquery-ui tooltips basically closes when element looses focus, so you can't hover the tooltip (to click on a link inside for example). But there is a workaround to prevent tooltip from closing for such case :). Thus i think this new jsFiddle is filling your requirements.
I'm so frustrated that I cannot solve this simple question.
How to programmingly set/active bootstrap tooltip?
For example, we are at page:
http://getbootstrap.com/2.3.2/javascript.html#tooltips
and let's open the chrome console and make tooltip work on the fly on the 'home' link in the left up corner.
var home = $($('.navbar li a')[0]);// select that home link
home.tooltip({title:'wthhhh'}); // set the default title
home.tooltip('show');
Step 3 doesn't bring up the tooltip.
Any help?
EDIT: I understand bootstrap has got a major update, but I believe it's irrelevant. Tooltip doesn't seem change.
By default bootstrap's tooltip is placed on top of the element, and since you're selecting the top nav bar, it's appearing off the screen - you can't really see it, but it's there.
If you change the tooltip placement from top (default) to bottom you will be able to see it correctly:
var home = $($('.navbar li a')[0]);
home.tooltip({title: 'wthhhh', placement: 'bottom'})
home.tooltip('show');
I have a table with thead and th's. Inside each th I have an image of shape question mark '?'. I want to show a help/tooltip on click of each th's help image. How to do this ?
Please suggest
I would use a plugin. Tooltip is a good one I have used.
there are many plugins for jquery that will do the work :
http://docs.jquery.com/Plugins/Tooltip
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
another plugin I have used:
http://flowplayer.org/tools/tooltip/index.html
Here are some tutorials for tooltips:
http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/