Simple implementation of Clicktips doesn't work
Boletus - January 30, 2007 - 12:20
| Project: | Hovertips and Clicktips |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | critical |
| Assigned: | proactive1130 |
| Status: | postponed (maintainer needs more info) |
Description
I tried to use the simple style of hovertips in a node body. It doesn't work. I copied the code from your site:
<div>Hover hear to make a tooltip appear beneath mouse</div>
<div class="hovertip">This is the HTML that will appear on mouseover.</div>This variant works though:
<p>You can click <span clicktip="t1">here</span> or
<span clicktip="t1"> there</span>.</p>
<p> blah blah blah more HTML here blah blah blah</p>
<div class="clicktip" id="t1">
This is the HTML that will appear when clicked.</div>Any hints of where to start looking for a solution?

#1
Possibly an input filter is munging your content before it gets sent to the browser. Be sure to view source for the page in question. Has a
or other tag been inserted between divs? Does it work if you try the PHP input filter?
#2
The souce looks like this:
<!-- start main content -->
<div class="node">
<div class="content"><div>This is something you can click on to make a tooltip appear</div>
<div class="clicktip">This is the HTML that will appear when clicked.</div>
<div>Hover hear to make a tooltip appear beneath mouse</div>
<div class="hovertip">This is the HTML that will appear on mouseover.</div>
<p>You can click <span clicktip="t1">here</span> or
<span clicktip="t1"> there</span>.</p>
<p> blah blah blah more HTML here blah blah blah</p>
<div class="clicktip" id="t1">
This is the HTML that will appear when clicked.</div></div>
It doesn't matter if I have full html or php enabled.
#3
Marking as active so I don't lose track of this. Will look into it.
#4
I also have the same issue. Changing the input format does not work.
Have you read the latest report on
Global Warming?
Wikipedia defines Global Warming as: "The observed increase in the average temperature of the Earth's atmosphere and oceans in recent decades, and its projected continuation. ... An increase in global temperatures can in turn cause other changes, including a rising sea level and changes in the amount and pattern of precipitation. These changes may increase the frequency and intensity of extreme weather events, such as floods, droughts, heat waves, hurricanes, and tornados."
#5
Okay -- I don't know how to make code appear in that block ... sorry ... but it's basically the same as Boletus post ...
#6
Same problem at this end cant get the hover module to work no error being generated, might have a quick look at the source code to see what happens
#7
I'm able to reproduce this but not sure what the problem is. Javascript is a pain to debug.
I noticed a couple things, though. Using <span class="hovertip"> instead of <div> seems to work. But navigating the DOM in javascript is very touchy. For example, you can't even have a blank between the span and whatever preceeds it, including a newline. So this might work:
<p>target</p><span class="hovertip">hovertip</span>While this (with newline) will not:
<p>target</p><span class="hovertip">hovertip</span>
And that means you should use Drupal's PHP Code input format, because the others tend to insert newlines.
I think the hovertip module needs at least one of the following to be really useful to people:
I haven't had time to make an input filter, and I could certainly use help with the javascript. Calling all jQuery experts!
#8
So on closer inspection this was not so bad. My browser tricked me by not reloading hovertip.js every time I changed it. Be sure to hit refresh!
In this patch I've changed hovertipInit() so that it looks for <div class="hovertip">. And I've changed targetSelectByPrevious() so that it is not fooled by blank spaces between the target and the tip.
I'm posting the patch here, but I will go ahead and check it in.
#9
OK, now I remember what I was thinking so long ago! Turns out I'm using <div class="hovertip"> in several different ways. If we enable the "simple implementation" using divs, and also the implementations using id and target attributes, then things get very confused. So we have to choose one or the other.
And what I did was use <div class="hovertip"> for one approach, and <span class="hovertip"> for the other. And that's how it's got to be. So the patch I am checking in will not change that behavior, but a simple edit to hovertipInit() (change a 1 to a 0) will enable the change for you.
Basically, a little hacking of hovertipInit will get you whatever behavior you want. In fact, I recommend users of this module write their own version of hovertipInit which selects only the way they choose to markup their hovertips. That will make the onready function execute more quickly. Note that under admin >> settings >> hovertip its easy to change the startup function.
#10
any chance of getting an up date of the module as there seems a lot of changes in the patch - I m not ver efficent and the CVS thing yet
any one get this to work correctly
tks
#11
I must be missing something yogadex but the patch and the module aren't a match could you post you new updated module
tks
M
#12
I checked the changes in. If you download the latest build and still have this problem, re-open this issue. If its a new problem, please submit a new bug report. Thanks.
#13
Where the build for it still not updated on the modules page or on the CVS
Also the patch you submitted what version of the module should that work with as the lines in the patch differ to those of the actually module thats stated in the patch(differ by a lot)
can you post the current patch file so we all can play along
tks
M
#14
What happened to this issues? Any solutions in sight?
#15
Just to let you know that there are more people interested in a working solution. Please update the version. Maybe use something like hovertip-5.x-beta1-dev so that simple users (as myself) know we are working with the right version.
Thanks and looking forward to a new version.
Jan
#16
A recent, easier and inobtrusive solution which shows a nice tooltip from title attributes is available here: http://drupal.org/project/jtooltips
#17
Clicktips aren't working! I've tried several different ways of inputting using the div and span commands. Nothing works!
Dave, you mentioned that I might not have my input filter configured correctly.
By this are you referring to the input that is shown in Administer/Hovertips. Where do you document what should be inputted
there for hovertip functionality vs clicktip? What should I input there? Bottom line, I like the functionality that you show working
on your website demo. You've obviously gotten the module to work on your website. What did you do to accomplish this?
#18
No, I'm referring to the settings under administer >> input formats. Also the input format selected when you edit the content, which you told me is full html.
You need to confirm that the markup you are typing in the node body is actually getting through unaltered to your browser. So simply view your node, then use your browsers view source feature to inspect the HTML it received. Does the node body look identical to what you entered?
#19
Hi,
Try this:
1 - check that the that the scripts and style of hovertip are loaded in the head of your template (with the other modules' script). you should have
something like (or approaching) that:
<head>
<title>blabla | blabla</title>
...
<style type="text/css" media="all">@import "/modules/hovertip/hovertip.css";</style>
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/modules/hovertip/hovertip.js"></script>
<script type="text/javascript" src="/?q=hovertip/settings_js"></script>
<script type="text/javascript" src="/modules/jquery_update/compat-1.0.js"></script>
...
2 - When you edit, switch to plain text editor (or also, I suppose, in source code mode if you are using special editor -fck...- ), here I tried/checked the php filter, and then copy and paste at the start of your edition:
<script type="text/javascript"> $(document).ready(function() { window.setTimeout(hovertipInit, 1); });</script>That's the javascript to initialize hovertip in your page.
3-Then make a test with one of the scripts given in the comments of hovertip.js source code, like this one:
<p>blah blah blah <span>important term</span> <span class="hovertip">text that appears.</span> blah blah blah</p>Bye,
Thank you Dave for this module,
Michael