UBB.Developers Forums UBB.threads 7 Development Addons and Modifications [7.1.1] - Mouseover topic title tooltip with .js

As usual, i had a buncha forum members with nothing better to do than to bitch about a 'lost feature' that i had hacked in for 65x when we upgraded to 71x.

Sooooo, i added this as a response to their griping. It was a fun one to do.

Essentially, this has a variable delay tooltip, that will show when the user hovers over a topic's subject.

The tooltip is fully styled and fully HTML, with all tags being closed by the truncator. No nl2br stuff or text only!

Just read the readme.txt (duh) and have at it. I have it working on my play forum: Here . The hover activates after a 1 second (configurable) delay.

I think i currently have it showing the last post in the thread, where first==last for a totally new topic

Notes:

1. "title="header=[Preview] body=[{$postrow[topic].PostBody}] fade=[on] delay=[1000] fadespeed=[1] cssheader=[tthdr] cssbody=[ttbdy]"

you can change these ie:
. "Preview" could come from a lang file, if you want and you could call it whatever
. fade=[on] can be off, if you don't want the tooltip to fade at all
. delay is in ms, so 1000 is one second. feel free to change. i find a short one kinda sux
. tthdr, ttbdy can be any class you desire. i just used them as 'tt' - tooltip

2. i've included a compressed version of boxover.js, since its static anyway. you can choose to copy boxover-cs.js to boxover.js if you want. i also have boxover-nm.js in case you killed the original boxover.js.

3. The css i included above was for a blueish theme (light), so feel free to change it for your particular needs. Also, the widths may not be to your liking. Have at it! You can include 'opacity' stuff and have some neat effects, if you'd like. i tried it, then reverted to none.

4. The popup is a fully HTML one and all tags that aren't finished are handled (finished off) by truncate.inc.php, so no worries, if you choose to have a different size for the preview.

5. I've gone even further with this puppy to add it to Active Topics preview and such. There are lots of places where this can be used, however I decided to stop for now, because what i really intend (and am in the process of doing) is to marry the .js with AJAX functionality so as to not have to burden the title="" with large amounts of data. This will make for a more polished product in the end. I'll probably coincide the new release of this puppy with 7.2, so i don't have to re-hack.

6. You can choose what the hover tooltip will display (first post or last post), by changing the SQL above from .TOPIC_LAST_POST_ID to t1.POST_ID

Screenie below:


That's it!

Enjoy!