Tooltips

fkelly · Posted: Sat Jan 16, 2010 8:41 am

What's the right (or preferred) approach for creating "tooltips" in RN 2.4 and up? I'm working on one of my own bike club modules and I have a form where I want tooltips to appear. I've looked at what's done in the rest of the RN code but it doesn't appear consistent. Montego does a:

Code:

//Make pop-up HELP available to the page
echo "<script type='text/javascript' src='./modules/$msnl_sModuleNm/wz_tooltip.js'></script>\n";

in HTML newsletter and the comments module has a different approach that I can't decipher. It appears that we include boxover.js from NukeFeeds also but I don't know what that code does.

In my code if I create a table cell (td) with a title attribute then when the form that includes that table cell is displayed I can see the title attribute when the mouse passes over that cell (though the location of the title is a little "off" from where I'd like it. I also see that Jquery has some code for "tooltips done right" but I don't have time to be spelunking in there unless we are going to use it as a standard for Ravennuke.

So what's a poor coder to do?

jakec · Posted: Sat Jan 16, 2010 9:01 am

Doesn't NS do something else again?

I think we should probably standardise what tooltips code is used, obviously a jquery one would make sense.

I guess they have crept in with the various third party addons we have added to the package.

montego · Posted: Sat Jan 16, 2010 9:17 am

I have wanted to change over the HTML Newsletter to something jQuery based, but have been waiting to see what we decide upon is standard in RN. I don't recall all the details, but I seem to recall that kguske had tried a bunch and that maybe he still wasn't entirely convinced on the right one? I may be confusing this with the tab implementation... not sure.

fkelly · Posted: Sat Jan 16, 2010 9:41 am

I have just been working on converting my form over from tables to lists. Laying out forms with tables (as is done throughout *nuke) is really a p.i.t.a. I keep meaning to convert myself over to the list approach ... see:

Only registered users can see links on this board!
Get registered or login to the forums!

but then you see an article like the one referenced, and while the basic layout looks great and the ideas are semantically more correct (and I realize that's important) but they keep getting into having to write and maintain a ton of code for browser compatibility. That said, in the time I've been posting this morning I managed to get a basic layout converted from tables to lists. Now to make it beautiful Smile

spasticdonkey · Posted: Sat Jan 16, 2010 10:24 am

nukeDH also introduces another, clueTip, which I'm pretty sure was kguske's favorite after trying out many of them.. I like boxover for it's ease of use, and cluetip is pretty cool too; very style-able and nice list of features... but not as easy as boxover since you have to include a custom js script in your <head> to initiate cluetip for specific classes, id's etc..

Only registered users can see links on this board!
Get registered or login to the forums!

cluetip is also better seo wise, using the split title option you don't have a bunch of extra code in your title tags like you would with boxover

cluetip

Code:

boxover

Code:

<a href="#" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=[This is the title] body=[The first set of contents comes after the first delimiter in the title.<br />In this case, the delimiter is not a pipe] singleclickstop=[On]">

I use both Smile

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

Nice summary, spasticdonkey! And I do prefer clueTip for the reasons you mentioned (and it's jQuery).

Although the extra tag for body is required for boxover, the other tags also give you more flexibility (at least, on the fly) than you have with clueTip. Doesn't everything involve tradeoffs? Smile

But it is nice to have options.

spasticdonkey · Posted: Sat Jan 16, 2010 1:18 pm

cluetip also has a unique feature I haven't seen in other tooltips, the ability for the user to "turn off" tooltips on the fly via a checkbox. Smile

I used it in this demo here (expand the editor to see):

Only registered users can see links on this board!
Get registered or login to the forums!

While cluetip requires some extra JS setup it's not too hard to build upon the examples on their demo page. For instance a checkbox conditional tooltip would require this type of JS in the <head>

Code:

$(document).ready(function() {
$('.shoutboxformbutton').cluetip({splitTitle: '|', leftOffset: '150px',
onActivate: function(e) {
var monkee = $('#monkee')[0];
return !monkee || monkee.checked;
}
});
});

where #monkee is the id of your checkbox and shoutboxformbutton is the class of your tooltip item.

There are a ton of different options you can add too Smile

and on a somewhat related note, want to easily add the ability to open external web pages in a modal window? Use RN's built-in colorbox!
open html/includes/jquery/jquery.colorbox.php
find

Code:

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
$(".colorbox").colorbox({opacity:0.65, current:"{current} of {total}"});
$(".colorboxSEO").colorbox({opacity:0.50, width:"750", height:"300", iframe:true});
});
</script>'."\n";

change to

Code:

$inlineJS = '<script type="text/javascript">
$(document).ready(function(){
   $(".colorbox").colorbox({opacity:0.65, current:"{current} of {total}"});
   $(".colorboxSEO").colorbox({opacity:0.50, width:"750", height:"300", iframe:true});
   $(".iframe").colorbox({width:"90%", height:"90%", iframe:true});
});
</script>'."\n";

then use the iframe class on a desired link, and done**

Code:

** If you are not using nukeNAV you may have to make sure that jquery and colorbox are being loaded (I assume nukeNAV always loads both).

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

And one more bump to focus on tooltips...