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.
Related
I am using jquery droppable to add divs inside a larger div. I am working on building a layout page.
see fiddle:
Fiddle
What I am trying to do is when the newRow or panel is dropped, add some css to it? i.e. make it draggable, change its color and so on...how can i do that?
i have tried.
$('#panel').append("<div id='"+id+i+" class='subPanel draggable'>"+id+"</div>").addClass('subPanel draggable');
but that adds the css to the #panel div...
You simply forgot to close the single quote:
$('#panel').append("<div id='"+id+i+"' class='subPanel draggable'>"+id+"</div>");
See result
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.
Please take a look at this jsfiddle
I gave position absolute to a question-sign icon with top:0; right: -42px; therefore the element that shows tooltip is outside of row. I think this has caused tooltip to not get proper width or misplace the tooltip content and tooltip content trapped within row-fluid. as you can see arrow position is fine.
update: I'd place ? icon next to textarea and textarea fill its parent width and aligned right. here is another example
Specify body as a container for a tooltip (demo):
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
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).
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/