Posted by dalehgeist on February 28, 2009 at 12:19am
Jump to:
| Project: | Cluetip |
| Version: | 6.x-2.x-dev |
| Component: | Documentation |
| Category: | bug report |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
I have followed the four steps given to install the module. I don't know what to do next.
I followed the steps given in the Example part of the Readme file:
- I added the following code to my template.php file: jq_add('cluetip');
- I created the following HTML in a Drupal node:<div class="cluetip-title" title="Header|The body of the title">Hello world.</div>
Result: regular, non-Cluetip-style tooltip, containing the full title. There must be something else I need to do in order to implement Cluetips.
There is a phrase in the Example section that might be a clue, but I don't understand it: "In your module, use the cluetip_load() function to load a js file that includes the parameters for your cluetip." What module does this refer to?
Comments
#1
I struggled yesterday for hours with this... here's what I did to make it work. Note that for some odd reason (caching?), this very same code *didn't work* for a while... then just suddenly started working.
In my form function, I have the following code... ('...' means later in same file)...
// Hook cluetip and my function to specialize cluetip
jq_add('cluetip');
drupal_add_js(drupal_get_path('module', 'mymodule') .'/js/pub-cluetip.js');
...
// Here I add rows to a table... adding the cluetip to the TD element... focus only on the 'class' and 'title' parameters
$rows[] = array(
...
array('data' => l($my_title, $my_url, array('attributes' => array('target' => '_blank'))), 'class' => 'cluetip-title', 'title' => 'ClueTip Title|ClueTip Body'),
...
);
}
The file "pub-cluetip.js" looks like this...
if (Drupal.jsEnabled){
$(document).ready(function() {
$('.cluetip-title[@title]').cluetip({splitTitle: '|'});
});
};
Now I'm struggling to get the AJAX part to work... the script always times-out when fetching the page to display in the tooltip. Makes me want to rip my eyes out.
Mark
#2
Mark,
Thanks for your reply. I think my question was more basic. I can't get cluetips to work, period. And I think I am missing a step. ALL I have done is:
jq_add('cluetip');to template.php, per the Example section of the Readme file<div class="cluetip-title" title="Header|The body of the title">Hello world.</div>, per the Example section of the Readme fileThe Example section of the Readme file also contains two references to "your module," which are quite opaque to me. I don't have a module. I'm just trying to get cluetips to work on my html content. Your inclusion of the 'mymodule' parameter in your code snippet also seems to be a reference to, well, my module. Of which I have none.
I'm also not sure where your "form function" is, or why you are dealing with tables. I wonder if you may be solving a problem that I'm not having.
I DID find one thing that seemed to need changing: the references in cluetip.module are to
/cluetip/jquery.[file].js, but when the Cluetip plugin is unzipped into the Cluetip module directory, its directory is actually namedcluetip-0.9.8. I renamed it to "cluetip" so that those pathnames would resolve correctly. (Which did not solve my problem.)I also noticed an "example.js" file in the Cluetip module directory. I tried pasting its contents inside a
<script>tag in the<head>tag of page.tpl.php. Still no luck.Is it possible that you are assuming a higher level of sophistication among your users than may be the case? (Yes, that's another way of saying I'm clueless, if you'll forgive the pun.)
#3
Dale,
Heh... while Cluetip is a really cool piece of code... can't take credit for it. I'm not the author... just struggled a bit as you seem to be... trying to help you through the rough spots. I had to inspect the code to figure out what to do, so I agree that the documentation could use a boost.
So the first thing to know is that the Cluetip module doesn't really do anything "by itself" (as far as I could tell)... you need a JavaScript "hook" to tie it to your code. For example, there is no code out-of-the-box to interpret the "cluetip-title" class and take action. There is an example with "cluetip-title", but it is assumed you'll follow the example (probably too much to assume).
So nothing happens unless you...
1) Create a JS file (let's call it 'cluetip-title.js')... it can be very simple... to interpret "cluetip-title"... something like I showed in my "pub-cluetip.js" example in my last post.
2) Create a directory for this file... I suggest "sites/all/js"... put the file there.
3) Follow the line "jq_add('cluetip');" with "drupal_add_js('sites/js/cluetip-title.js');". Notice no "module" here... sorry I confused before.
4) Make sure you set up the "cluetip/cluetip" directory... as it sounds like you did.
This should work for you. You can see an example of this at my "hobby site" www.authorcollector.com... on the publications page (hover over a book title). [you don't need to register to see it working].
I did get the AJAX stuff working... fetching pages to display in the tooltip... but decided it would be too complex to add a special content type with appropriate formatting for tooltips. So I just construct the tooltip as an inline html string and then set "title=$my_html".
Best of luck,
Mark
#4
OK, I got it working.
Here's what I did:
1. Using alerts and "view source", I verified that adding
jq_add('cluetip');into template.php did indeed load all the necessary .js and .css files inside the<head>tag2. I added the example.js code inside the
<body>tag of page.tpl.php, just before the</body>tag. At this point it still wasn't working, until...3. I commented out
$(document).ready(function() {. Apparently this never fires, for some reason.Consulting the "Getting Started" page on the Cluetip plugin site (http://plugins.learningjquery.com/cluetip/#getting-started) helped clarify where the actual cluetip call needed to go - although they did say you could add it to the
<head>tag, which did not work.If I'm treading on thin ice with this kind of implementation, please let me know, because I'm plowing ahead with customizing it now.
#5
Mark,
Thanks a mil for the response, and sorry for mistaking you for the author. While I've done some JS work, I haven't done any in Drupal, so I was indeed pretty clueless about how it was handled. I get now that those "add" functions are how the php template sucks the .js file in. (I got the same result, of course, from simply adding
<script src="[path to js file]"></script>to the header of page.tpl.php.)As I mentioned, I have the actual Cluetip call,
$('.cluetip-title[@title]').cluetip({splitTitle: '|'};,) inside the ><body>tag because it didn't work inside the<head>tag, and, as I also mentioned,$(document).ready(function()never seemed to fire, no matter what tag it was inside . I'll try pulling it back out into an external script and see if I have better luck.Regarding AJAX, it sounds like you're trying to do what I would ideally like to do: suck HTML out of a node into the cluetip. It's a drag you couldn't get that to work. When you say "inline HTML string," you mean inside a .js file? The Cluetip plugin site seems to imply that you could also simply create an HTML doc, which I guess could sit inside your "files" folder. I may try that.
Thanks again,
Dale
#6
Dale,
No worries about anything, just glad I could help. I'm probably not expert enough to comment on whether you're treading on thin ice or not... no idea why jq_add would correctly insert a script reference into the header block and drupal_add_js would not, as both work for me. Thing is... it works... I say full speed ahead. Might want make sure it works in common browsers (FF, IE, Safari, ...)... other than that never look back... :)
As to the inline HTML... undoubtedly might be considered "hacky" by someone really savvy in web development (I'm just a hobbiest). But here's a code snippet to give you an idea (again, this is in a module... the idea would need to be adapted somehow for your approach). This is what I do to construct the tooltip seen when one hovers over a book title on the publications page at www.authorcollector.com.
... aw feh! When I paste the code here, the editor interprets the HTML as formatting and screws it up. I'd be willing to e-mail you the snippet if you'd like... my e-mail address is at the URL above.
As to reading a file... not much experience here using files from PHP... as it is just too easy to plug stuff into a database (aka "super" file). Unsure if using an URL reference to your file will work, as Drupal catches all references and tries to construct the page for you.
Mark
#7
Mark,
Using your example, the example that came with the Cluetip module, and the example from the Cluetip Plugin page, I have verified that
a) adding
drupal_add_js('sites/js/[example].js');to template.php does pull that script into the page's<head>tag, BUTb) the code doesn't work when it's inside the
<head>tag - for me.A wild guess is that it may have to do with my theme, which is based on the zen theme. (That's as far as my thinking has gotten.)
$(document).ready(function(){})never fires, and when I comment it out, the code doesn't work. (I've verified all of the above using my sophisticated "alert" troubleshooting method.)So it looks like my best bet here is the rather hacky method of putting my entire script inside the
<body>tag. I'll keep you posted on developments.Dale
#8
@markallenneil & dalehgeist
Thank you to both of you for putting the effort into finding out how to get this module working, its made my work so much easier
#9
BTW, I figured out what this is: it's what happens when you have your JS set to cache/compress (in Admin > Configuration > Performance). It creates one big compressed JS file, and confusion for slow types like myself.
#10
Ditto. Way too much work to get it to function. I'm moving on and searching elsewhere, surely there's a better module out there that has the same kind of functionality.
#11
Bump.
Enabling users to actually implement the functionality provided by this module is critical to adoption.
I find cluetips to be a better alternative to Beautytips, but adoption of Beautytips is higher because of superior support and documentation.
#12
Hi,
I've just recently started to maintain this module, so apologies for the confusion. As markallenneil rightly explained, this module is a fairly thin wrapper around the cluetip library. Enabling it alone won't do anything. Be prepared to write some code! I've recently made a drupal 7 version and a new 6.x-2.x branch with updated documentation to hopefully help make that bit a little easier.
If anyone fancies having a go with the new versions and pointing out any remaining area's of confusion that would be great. It's sometime hard to approach these things as a new user!
#13
I've downloaded the clue tip package and copied it to sites/all/libraries but the modules can't be enabled - requires Libraries (missing). What exactly should go into the libraries folder, the cluetip folder itself, or the contents?
#14
And fixes his own problem. Installed the Libraries API module - libraries-7.x-1.0. Looks like this module is a pre req and should be mentioned as a definite requirement. Don't yet know whether this is a sufficient - I wonder if the Libraries module actually contains the Cluetip code or is merely an enabler.
#15
Libraries API module is mentioned on the module page, but I can make it more clearly a requirement.
The libraries API module currently just makes it really easy for modules (like this one) to allow their external libraries (the cluetip javascript library) to be put in any of the standard locations and automatically found (/sites/all/libraries, /sites/site_folder/libraries, /profiles/profile/libraries). Otherwise every module that just integrates some external library has their own method of doing it and specific place where you have to put it etc.
Hope that clarifies!
#16
I should mention that I am using D7 with a theme based on Omega with a new to me method of adding libraries. Spent yesterday going back to basics (non-Drupal) page. The major problem seems to have been the CSS file - I was getting the information but unformatted. When that worked I added libraries and code to a Drupal page. Despite constant "clear all caches" and visiting of theme settings nothing changed. Last thing last night I reloaded the database and this morning, as if by magic, it works. Would I be wrong, especially given the problems that seem to afflict admin_menu, in thinking that there may be a problem with caching?
One tip, I added an on-click thingy to at least verify that I was picking up jquery.
Hope this helps others.
Finally found the problem - unable to use $ as jquery in D7. Check http://drupal.org/node/224333#javascript_compatibility
Good for those converting not so easy to find for those starting from scratch.
Specifically there is a workaround that isolates jquery functions, "( function($) {" before the function, and "} ) ( jQuery );" at the end. These can wrap the entire demo.js function.
#17
Apologies, but I'm struggling to work out if you're saying there's still a problem in the module or not?
The README.txt includes example usage, including the closure you describe that lets you reference jquery as $.
#18
Didn't spot the last bit, the closure bit isn't that obvious. I'd just installed the module, didn't the jquery problem come in with D7? I wasn't aware of it. Anyway problem solved, just can't get the ajax4.html bits, the more complex ones to work, have switched to beautytips, may revisit later.
#19
Ok, maybe I'll add a comment to the readme to explain the closure. Thanks!