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

Dave Cohen - January 30, 2007 - 22:01
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?

#2

Boletus - January 30, 2007 - 22:24

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

Dave Cohen - February 9, 2007 - 12:37
Status:postponed (maintainer needs more info)» active

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

#4

spyderpie - February 9, 2007 - 14:29

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

spyderpie - February 9, 2007 - 14:32

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

#6

somes - February 15, 2007 - 17:14

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

Dave Cohen - February 20, 2007 - 14:19

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!

#8

Dave Cohen - February 20, 2007 - 15:04

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.

AttachmentSize
114185.patch 1.74 KB

#9

Dave Cohen - February 20, 2007 - 15:19
Status:active» fixed

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.

AttachmentSize
114185_0.patch 3.79 KB

#10

somes - February 21, 2007 - 18:41

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

somes - February 22, 2007 - 19:16

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

Dave Cohen - February 22, 2007 - 20:01

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

somes - February 22, 2007 - 20:28
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

#14

Boletus - February 28, 2007 - 18:22

What happened to this issues? Any solutions in sight?

#15

jandoemen - March 7, 2007 - 18:29

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

miguel - November 14, 2007 - 00:35

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

#17

proactive1130 - December 12, 2007 - 18:29
Title:Simple implementation of Hovertips doesn't work» Simple implementation of Clickrtips doesn't work
Priority:normal» critical
Assigned to:Anonymous» proactive1130

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

Dave Cohen - December 12, 2007 - 19:14
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?

#19

michaelFR74 - February 27, 2008 - 04:38

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

 
 

Drupal is a registered trademark of Dries Buytaert.