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;}

[Stupid Ghost]

This user has been denied support.

It would be lot better if you can do it on forum threads instead of latest threads.

Can you plz help us do it?

[pavemen]

just apply the same edits to the template you want to edit.

the edits are

1 - add class="tooltip" to the thread link HREF
2 - move the closing </a> tag after the thread subject to AFTER the other content you want to show in the popup
3 - wrap the everything after the subject in <span class="custom portal_popup"> </span>.

it should be

<a class="tooltip" hef="...">
  subject
  <span class="custom portal_popup">
    author
    date
    views
    replies
    whatever else
  </span>
</a>

[terzier]

thanks for share pavemen
+1 for you

[Midori]

Thank you for sharing . And +1 for you.