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?

CommentFileSizeAuthor
#9 114185_0.patch3.79 KBDave Cohen
#8 114185.patch1.74 KBDave Cohen

Comments

Dave Cohen’s picture

Status: Active » Postponed (maintainer needs more info)

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?

Boletus’s picture

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.

Dave Cohen’s picture

Status: Postponed (maintainer needs more info) » Active

Marking as active so I don't lose track of this. Will look into it.

spyderpie’s picture

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."
spyderpie’s picture

Okay -- I don't know how to make code appear in that block ... sorry ... but it's basically the same as Boletus post ...

somes’s picture

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

Dave Cohen’s picture

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:

  • An input filter that makes it straightforward to add a tool tip
  • More robust javascript that gets around the problems described here

I haven't had time to make an input filter, and I could certainly use help with the javascript. Calling all jQuery experts!

Dave Cohen’s picture

StatusFileSize
new1.74 KB

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.

Dave Cohen’s picture

Status: Active » Fixed
StatusFileSize
new3.79 KB

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.

somes’s picture

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

somes’s picture

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

Dave Cohen’s picture

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.

somes’s picture

Status: Fixed » Postponed (maintainer needs more info)

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

Boletus’s picture

What happened to this issues? Any solutions in sight?

FreeFox’s picture

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

miguel’s picture

A recent, easier and inobtrusive solution which shows a nice tooltip from title attributes is available here: http://drupal.org/project/jtooltips

proactive1130’s picture

Title: Simple implementation of Hovertips doesn't work » Simple implementation of Clickrtips doesn't work
Assigned: Unassigned » proactive1130
Priority: Normal » Critical

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?

Dave Cohen’s picture

Title: Simple implementation of Clickrtips doesn't work » Simple implementation of Clicktips doesn't work

By this are you referring to the input that is shown in Administer/Hovertips

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?

michaelFR74’s picture

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