73 comments found.
Hi
Can you advise on how to make tooltips active for ajax loaded content.
Hi,
It’s not possible to use ajax, you’ll have to modify the script so it reloads every time you load ajax content.
Best regards, Rik
Hi,
great script! However, I’m using this in a responsive design and on mobile devices you have to click links twice in order to visit the link with the tooltip.
I’ve been trying to deactivate the tooltip on mobile devices, but can’t sort it out. Is this something you can help me with?
Thanks for any help!
Hi,
Thanks! That is because the tooltip is shows as hover event and mobile devices do not have hover events. To deactivate it for mobile devices just wrap everything in an ‘if’ statement and check for mobile devices.
Best regards, Rik
Does it support auto-width?
Hi,
Yes, the width is calculated automatically to a maximum of 300px I believe. You can change this in the script though.
Best regards, Rik
Hi there – love the tool tip. I need help though: I’m trying to get a table row to use the tip. When I put it in the html code it works fine:
<tr class="tooltip_red" data-text="<strong>Test</strong> Tooltip">(Content Here)</tr>
However, when I import the same thing dynamically from jQuery, the table still shows up, but the tool tip no longer works… what am I doing wrong here?
when tooltip div is located within a div which has overflow to hidden, then the tooltip is also hidden
I read comments unfortunately after purchasing and i had the same problem above.
Even i have a good knowledge i was not able to solve the issue and I think you are also not able to solve this issue. Solving this issue is a real time consuming job.
Why do not you mention that at Item Details – Important Information honestly and inform people?
I do not recommend this addon for everyone who has limited time and looking for a quick solution for any project.
Hi there,
Great script thank you. Is there any way I can get the tooltips to appear on click, rather than hover?
Many thanks in advance.
Hi,
Have a look in the JS and change the “hover” to “click”. Not sure if it works, but you can try it.
Best regards, Rik
Hi Rik
Thanks for your input. Unfortunately both ‘click’ and ‘onclick’ don’t work. It’s never that easy is it! :o)
Thanks again Jon
can multiple tooltips be placed on an image?
Hi, Wondering if this will work across multiple devices, also need it to work with an image as the trigger(link) and then show a bigger image as the tooltip. I don’t need text.
Thanks!
Hi,
The tooltip can only show up when you hover over a piece of text or an image, it’s just a simple script.
Best regards, Rik
Hi,
Just purchased this tooltip but a massive limitation is that when the is located within a div which has overflow to hidden, then the tooltip is also hidden. How can I make the tooltip appear above all other elements?
Also it seems to get narrower when it gets to the edge of the page rather than just moving the position of the arrow to allow flexibility, when it gets to the edge of the page, it just cuts off some of the tooltip instead of making it all visible. Please fix this, this is a paid plugin, it should work fully.
Hi ! i just bought your plugin , i´m installing it on my web but the first i found is that if i set the tooltip to an image with link in the following way :
When i point to the link i see taht i lost the default cursor for the link (i mean the hand ) and it just shows and arrow as if it weren´t a link …
Can you give me any soluton please?
Thanks
Hi,
The picture is not showing. Please make sure you’ve entered the correct path.
Best regards, Rik
hi, can i make tooltips appear on the left or right of the image where the mouse is over?
Hi,
Only on top, but you can position the arrow of the tooltip left, right or in the center.
Best regards, Rik
Is this script no longer supported?
Me again. There is a bug in Opera and Safari where the tooltips stay active after you click on a link to another page, then arrow back. If you do this multiple times (hover and show tooltip, click the link, then arrow back), each one you previously moused-over/clicked will still be visisble. The page in question has multiple image buttons with the tooltip applied, and it is very common for users to click and arrow back, so this is a problem. I just need some code in there somewhere that will kill the tooltip when navigating away from the page. Help? I tried messaging you but have received no response after a week. Thanks much…
Are you sure the arrow would work on IE8 ,9 ?? Since I purchased another JS here, they claimed the arrow would work, but actually it doesn’t work…
Hi,
I can confirm that the arrows display in IE9 . In IE8 they also display, but I test using IE9 with “browser mode” set to IE8 so it might not be exactly the same, but the arrows do show.
Best regards, Rik.
I am disappointed it doesn’t automatically detect the edge of the browser window and position itself accordingly. That’s pretty standard tooltip behavior. It’s either useless to me, or I’m going to have to write a lot of code to “fake it.” 
Hi,
Try positioning the tooltip left or right if you’re having trouble with the edges.
Best regards, Rik
Unfortunately, not an option in all cases. I’m populating a full-page grid of images with these tooltips on a fluid layout. So depending on the size of the browser window and where each image falls in the layout, they could need left, center or right positioning. No way to detect that without a lot of extra code. Bummer. But just wanted to put it in the comment thread so others who need this functionality will know to keep looking before they pay $$.
Really disappointed… Can only position this tooltip top_left or top_center. For a paid tool you would expect to be able to also position top_right, bottom_left, bottom_center, and bottom_right.
Also, there is a bug where it won’t position the tooltip correctly if you position absolute.
I’m going to use a free tooltip now instead.
Hi,
I’m sorry that you’re disappointed. However, you can actually place the tooltip in the left, center and right. Yes, it’s impossible to position the tooltip absolute, but you’ll only need that in 1% of the cases so I decided to just leave it.
Best regards, Rik.
Rick, where would I change how the text is stored in the tooltip? I’m in ASP .NET with a C# code behind and I can’t create these dynamically without tons of extra code since the data-text property is not available. I would have to write an entire HTML writer class and lines and lines of extra code just to get text into these tooltips. Not sure I want to introduce that kind of risk to my product and potentially always be debugging this for a “simple” tooltip.
Hi,
You really have to put the text in the data-text attribute. The only way (I can think of) to quickly change this, is by replacing all the data-text with title (if this works for ASP .NET) in both the tooltips.js and the tooltips.css.
Best regards, Rik
Thanks Rik. I can verify that method does not work. However, I did find the solution and it is so simple I’m embarrassed. 
But if there are any other novice .NET writers out there who have the same issue, I worked it out by adding the data-text property through the Attributes.Add() function.
So, if you wish to add the tooltip to: Image newImg = new Image();
Give the CSS class you choose: newImg.CssClass = “tooltip_green effect_left”;
Then use the Attributes.Add() function to add the data-text property and the text you wish the tooltip to display: newImg.Attributes.Add(“data-text”, “Title Goes HereText goes here”);
Well, didn’t realize the html code would render in the comment. So note the text in bold was supposed to be wrapped with the strong tag.
No problem I’ll tell this to the other ASP .NET dev’s if they come with the same question.
Hi, I’m interested in purchasing the script, but I’m under some pretty tight licensing constraints . Is there any other license (i.e., MIT , GNU, etc.) applied to this script besides the envato regular and extended licenses? Thanks!
Hi,
No there isn’t, however you’ll have to use jQuery which is licensed under MIT /GPL2.
Best regards, Rik.
Thanks! MIT is already approved.
Does it work when user mouse over an image?
Does it work on IE ??
Thanks.
Hi,
Yes it works for over an image. There is support for IE, but only the latest versions (IE8 & IE9 ).
Best regards, Rik
So IE8 and IE9 got full support?
Can I customize an image to display on the tooltip?
Thanks.
Yes, IE8 & 9 have full support, but it’ll look just a little different in IE8 because it doesn’t support any CSS3 effects.
You can place any html in the tooltip, so you can also place an image inside. I think there’s even an example for this in the documentation that comes with the download package.
Best regards, Rik
Do I take it that there is NO SUPPORT for this CODE now, after 20 days, I expect to have gained a reply to a simple question.
I’m sorry, but providing support through item comments is becoming a mess, I’d rather have people message me. I’m still waiting for Envato to fix this, so it’s not your fault.
But to answer your question: This is not possible. It’s stacking behind other elements (even with a higher z-index) because the position is “relative” not “absolute/fixed/scroll”. So there’s really no way to solve this.
Just thought of this now: maybe if you place the tooltip in a div with absolute position and z-index: 999999. Something like this
<div style="position: absolute; z-index: 9999"><span class="tooltip_red".......></div>. It might not work, but you could give it a try
Best regards, Rik
Can confirm it doesn’t work, tried it in all guises and not one achieved it thxs – trying to create my own work around, but if you are using multiple divs all with float and a popup div inside the floating div where all the DIVS are set at z-index1 then the DIVS stack up, but the pop up message assigns the z-index from the FIRST div so the pop up appears behind all the following divs…
I ve tried all things z-index wise -9999 and 0 and 9999, even backward numbering the stacking divs ie 9 8 7 6 etc
all does not work as the pop up assigns the z-index of the first div.
puzzling.
Like I said, it’s probably not going to work. Shiny Tooltips was never meant for this.
Best regards, Rik
Thank for confirming that its broken, sorry but don’t expect these sort of answers.
If the element is set at z-index 10, then are you saying that the tooltip is et at z-index 0 what ever you do???
if its relative, whats it relative to???? the container or z-index = 0
