jQuery plugin: Tooltip
Current version: 1.3
Compressed filesize: 3910 bytes
License: MIT/GPL
Files:
Download
Changelog
Demos
Documentation
Dependencies
Required
Optional
- optional: bgiframe plugin to fix select-problems in IE, just include to apply to tooltip
Support
- Please post questions to the jQuery discussion list, putting (tooltip) into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
- Please post bug reports and other contributions (enhancements, features) to the plugins.jQuery.com bug tracker
Great script! One question please.
I’m using your script in combination with HighSlide:
http://vikjavev.no/highslide/
The tooltip is working fine, but when clicking on a link the window of highslide doesn’t appear. The link directs me directly to the page I was linking at.
Testpage
I think there is a conflict somewhere but I can’t find where.
Any help is appreciated.
One more thing:
The same code is working on:
IE 6
IE 7
Opera (is not showing the tooltip at all, but the window is working)
Is not working on:
FireFox 2.0.0.11 (the tooltip is visible, but it redirect to the link)
Safari (does not show the PNG image, but it works)
This is driving me crazy.
Hi!
Congratulations on this great plug-in!
I am trying to use it but there is a small issue in Firefox 2.0.0.11 that I would like to solve.
If we have a link like this:
OutSystems corporate site
The return false should prevent the link redirect. And it does (under IE), but not under Firefox.
Any suggestion?
Thanks in advance.
Cheers,
Mário
I love these tooltips, great work and very easy to implement.
However, one problem I’ve run into is that using the Tooltip script together in conjunction with FusionCharts causes IE (6 & 7) to abort (Internet explorer cannot open the site, operation aborted). The page loads half way, then errors out to the stock IE ‘cannot display web page’
I’m guessing it’s the FusionCharts.js, a copy of which can be viewed here:
http://walkertracker.com/js/FusionCharts.js
Removing either makes the page load normally.
Anyone have any ideas what might be causing the conflict between the two?
Thanks in advance,
Ben
I’m having one hard time getting this to work. I may be missing it, but is there not readme file or documentation that explains a little better how to implement this with our site? I have nearly zero javascript experience, so I’m totally lost on how to implement this.
I have an image gallery and I’m trying to make it where once someone hovers over the image, a tooltip will pop up with a full size preview of the image. Similar to what the lightbox effect does only faster and doesn’t require clicking.
Here is my HTML:
{gallery-image-name}{gallery-image-description}Here is where I’ve linked to the js files in the head of my page:
$('ul#gallery li a').Tooltip();
Can someone tell me what I’m doing wrong?
Thanks
Ok, well it looks like my past post didn’t include all of the HTML that I included even though I wrapped it in code tags, so I get nevermind since I can’t post what have here.
OK mates, i solved the problem with IE6 & 7 when you get the message: “Internet explorer cannot open the site, operation aborted)” and the page doesn’t load.
You have to change a part of the tooltip’s createHelper function, where the helper appends to the body. I don’t know why, but if you change the body to an element of your page, like a container, the problem doesn’t occure.
helper.parent = $('')
// hide it at first
.hide()
// add to document
.appendTo('body'); // here it is the problem, you have to change the body
I want to use the bodyhandler function. So I downloaded the demo and checked this out.
$(‘#yahoo a’).Tooltip({
track: true,
delay: 0,
showURL: false,
showBody: ” – “,
bodyHandler: function(){
}
});
When I move the mouse over the anchors inside div #yahoo, firebug throws an error
helper.body.html(this.tSettings.bodyHandler.call(this)).show is not a function
[Break on this error] helper.body.html( this.tSettings.bodyHandler.call(this) ).show();
jquery.tooltip.js (line 234)
Any help is appreciated.
Hi,
We are thinking of implementing the Tooltip plugin on our website,
but it seems however like it might be vulnerable when it comes to XSS (cross site scripting). If the text found in the a title attribute contains html tags it will run them.(which could be quite harmful if this is -tags) Do you plan to build in functionality which removes html tags or is there some way we can work around this?
Many thanks
[...] It wasn’t entirely obvious what some of the fields were when adding a new release. We’ve updated this to provide a bit more information by way of a handy little jQuery tooltip plugin [...]
Great plugin!
Strange thing… how to resolve? Font-size in IE does not correspondent with font-size property value in stylesheet. In IE font-size is much larger.
^_^
Really good plugin, using it a lot!
I placed a link to this page with the credit for it! really nice work!
@Paul: You can set $.tooltip.blocked to enable/disable tooltips.
@Moonwalker: Could you post a testpage with the tooltip/highslide combo?
@Mario: Could you post a testpage?
@Ben: Just including fusioncharts.js together with the tooltip works fine for me. Could you post an example that actually fails?
@Deron: The 1.2 demo includes an example for showing fullsize images in the tooltip.
@John: I’ve improved the bodyHandler option to accept HTML strings, DOM elements and jQuery objects as the return value. That may fix your issue.
@ALM: You can use the bodyHandler option to escape the title before displaying it.
@Monkeytail: Could you provide an example or some further explanation?
@alex: Great to hear it just works for you.
@ Jorn
The first screenshot shows the tooltip content in Internet Explorer, the second in Firefox. As you can see the text in IE is much bigger than in FF.
—————————————————————————–
http://i27.photobucket.com/albums/c182/monkeytailbiz/IE7_1.jpg
http://i27.photobucket.com/albums/c182/monkeytailbiz/FF_2.jpg
—————————————————————————–
#tooltip {
...
font-size:10px;
...
}
#tooltip.pretty h3 {
...
font-size:8pt;
}
@Monkeytail: 1.2 now uses some additional CSS to its demo page to reset styles, solving that particular problem. I’ve reused CSS from Eric Meyer’s Reset Reloaded post.
Comments here are now closed.