Latest thread deteails as CSS popup/hover

[pavemen]

Original and maintained thread here: http://www.communityplugins.com/forum/sh...hp?tid=308

I had a request for a simple feature to make the latest threads in the portal have all its details such as author, date, views, replies removed from view until hovered. WIth just CSS and template edits you can get a result in behavior like



portal_latestthreads_thread

<tr>
<td class="{$altbg}">
<a class="tooltip" href="{$mybb->settings['bburl']}/{$thread['threadlink']}">
    {$thread['subject']}
    <span class="custom portal_popup">
        <img src="{$mybb->settings['bburl']}/images/on.gif" alt="Thread" height="24" width="24" />
        <em>{$thread['subject']}</em>
           {$lang->latest_threads_lastpost} {$thread['lastposter']} &raquo;  {$lastpostdate} {$lastposttime} <strong>&raquo; </strong>{$lang->latest_threads_replies} {$thread['replies']}     <strong>&raquo; </strong>{$lang->latest_threads_views} {$thread['views']}
    </span>
</a>
</td>
</tr>

notice the class="tooltip" and <span class="custom portal_popup">...</span> changes. Please note the changes in the content being output as well. You can change the icon being displayed here as well, for now I just used "on.gif"

then in global.css add the following (edit to your own style if you like)

.tooltip {
	border-bottom: 1px dotted #000000; color: #000000; outline: none;
	cursor: se-resize; text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; width: 500px;
}
.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.portal_popup { background: #FFCCAA; border: 1px solid #FF3334;}