UBB.Developers Forums UBB.threads 7 Development Addons and Modifications [7.2] - Mouseover topic title fading tooltip

Essentially, this has a variable delay tooltip, that will show when the user hovers over a topic 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. 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!

(Edited and updated for 7.2 release)

This is great .. thanks heaps. I applied it and it works very well. A couple of things I noticed:

1. It doesn't like spoilers. If there is a spoiler in a topic, it won't show the preview.

2. The second item in Step 2 - the Replace With code is missing the "; at the end, although I picked it up straight away, and it wasn't a problem.

Otherwise it's wonderful. I'm going to have a lot of happy users. They've been asking for something like this for ages.

Thanks again!!

Good catch Rose! updated readme.txt for Step 2.

Will look @ spoilers. Gotta make sure that it doesn't spoil the spoiler too!!

Holy moley, the POST_BODY impact for a spoiler is huge. it's over the 450 character limit, so html->truncate kills it.

That's the nature of the spoiler tag as it is stored in the database.

Even upping the limit to something larger in the truncate(450) call, doesn't fix it either soooo..

For now, it will have to stay as is.. i'll see what i can do with the truncation as to some special cases. i've noticed embedded vids don't get previewed either, but these are more rare than common.

I can live with the spoiler thing, SD - and the video thing. But I have noticed one other thing, and I'm not sure what to do about it.

When I click on a topic now, it doesn't take me to the first unread message - it takes me to the beginning of the step. Any ideas?

Ok, we fixed that. SD, I'm hoping I can make sense here, but I'll do my best.

In postlist.tpl (Step 1), you'll see the code below. We changed the second

Code

{* SD - Mod for mouseover, hover tooltip *}
{if $postrow[topic].announce}
	<a href="{$config.BASE_URL}/ubbthreads.php{$var_start}ubb{$var_eq}{$mode}{$var_sep}Number{$var_eq}{$postrow[topic].Number}{$var_sep}an{$var_eq}{$postrow[topic].announce}{$var_sep}page{$var_eq}{$page}{$postrow[topic].firstpost}">{$postrow[topic].Subject}</a>
{else}
<!--
	<a href="{$config.BASE_URL}/ubbthreads.php{$var_start}ubb{$var_eq}{$mode}{$var_sep}Number{$var_eq}{$postrow[topic].Number}{$var_sep}page{$var_eq}{$page}{$postrow[topic].firstpost}" title="header=[Preview] body=[{$postrow[topic].PostBody}] fade=[on] delay=[1000] fadespeed=[1] cssheader=[tthdr] cssbody=[ttbdy]">{$postrow[topic].Subject}</a>
-->
	<a href="{$config.BASE_URL}/ubbthreads.php{$var_start}ubb{$var_eq}{$mode}{$var_sep}Number{$var_eq}{$postrow[topic].Number}{$postrow[topic].goto}"title="header=[Preview] body=[{$postrow[topic].PostBody}] fade=[on] delay=[1000] fadespeed=[1] cssheader=[tthdr] cssbody=[ttbdy]">{$postrow[topic].Subject}</a> 

It was easier to do that than try to explain it. Now what it does, is show the first message in the preview, and when the topic is clicked on, it goes to the first unread one.

Hope that helps. It's always easier to modify someone else's code than it is to write my own.

Thanks again!

Lookin good paps, keep up the good work

actually Rose, that's a better idea. i forgot to revert the mod back to 1st unread, because there is another mod that i had done, which allows preview in 3 parts.

1. hover over subject --> preview 1st post
2. hover over replies x (yy) --> preview 1st unread
3. hover over last poster's name --> preview last post

and all 3 were clickable (2 are now anyway) to take you to what was shown in the preview. i just made the (yy) clickable too..

i think for this mod though, it should jump to 1st unread as you have done and is how the board functions without the preview.

i will update the files to reflect your input there.

and thanks again

ps: all files now up to date

If you haven't, could you post your mod that does what you say here, about first post on subject, first unread on replies and last post on person. I'd like to have that option ...maybe