Hello, I am interested in creating something for my Drupal site that pops up a div containing HTML content (links, etc.) when the user mouses over certain links on the site. This would be similar to the behavior on Netflix where you mouse over a movie title and a synopsis pops up, or on nytimes.com's "My Account" link. I think this would be relatively simple in Javascript, but I'd prefer to use a module if possible so that I could make changes through the admin interface and not through the code.
I looked at Lightbox2, but it seemed that the only option with that module was to have a lightbox open up when the user actually clicks the link -- not on mouseover -- effectively over-riding the link's primary function of redirecting the user (hope that makes sense). I'm relatively new to Drupal, so maybe I'm just missing something here...
Does anyone have any better suggestions of other Drupal modules, or if not, any JS libraries that would be useful?
Thanks!
Comments
Hovertips and Clicktips
Is the Hovertips and Clicktips module what you're looking for? There are also the Tool Tips, jTooltips and Over Text modules.
These suggestions all look
These suggestions all look useful. Just one question: will the tooltips be clickable? I need to be able to display clickable links inside the tooltips... Thanks!
I haven't tried the others
I haven't tried the others but I know the Hovertips and Clicktips module does it. Check out the demo page, which says "Both types of tooltip can contain arbitrary HTML."
Rendering issues
OK, I've got this up and running on my dev site. But I'm having two (possibly related ) issues. First, unsurprisingly, I'm having trouble getting one of my hovertips to show up in IE; I have 4 of them on the page, and the rest of them all work fine. I don't see any difference in the HTML between the broken tip and the working tips...
Second, in Firefox I have noticed that sometimes text shows through the hovertip from the background, particularly when mousing over links within the hovertips. I thought it might be a z-index issue so I set the hovertip z-index value higher than anywhere else on my site, and the problem persists.
Any ideas? Thanks guys!
Prototip
I've also had good luck with Prototip. There's a small fee, but it's really flexible and reliable.
Hi joeeastham-gdo, can you
Hi joeeastham-gdo,
can you post the site which uses prototip?
When i try to include the prototype libaries my site breaks and no javascript will work anymore :(
Referencing a Node
Hi all,
I am trying to do something similar to clairej expect I want to apply the hovering preview to node teasers. When a user hovers over a node teaser it would show a preview of the entire node. Which of the three (hovertip, clicktip, or prototip) would be most appropriate to accomplish my task? If someone could provide or point me to a tutorial that would be greatly appreciated.
Thanks,
Chompz
???How to Use Hovertip???
I tried to implement Hovertip in my content, but has been unsuccessful. After looking online for a tutorial I have been unsuccessful. Could someone please provide me with a tutorial to using hovertip? I am using CKEditor, so I have tried disabling the CKEditor, but it made no difference.
Please help. Thank you.
Here is the code I used in my content: (I replaced the <> with !, so it does not get filtered)
// initialize tooltips in a seperate thread
$(document).ready(function() {
window.setTimeout(hovertipInit, 1);
});
!div !class="hovertip" !id="italic"!
Text like this appears when you hover. And disappears after you move your mouse away.
!p!
This is an example of a !span! hovertip="htdef">hovertip/!span!./p!
!/div!