CSS Pligg Tooltip
Back in May I showed you how to display a thumbshot of the story submitted using a jQuery hover, now, let’s make it better by only using CSS.
Why not use jQuery? By itself, there is no reason. However, removing the need for it will cut down on load time.
Another issue with Pligg and jQuery is they do not always get along. There are too many conflicts with the scriptaculous effects and prototype, which does not like jQuery.
The following is so simple, there is no reason not to use it.
Open, link_summary.tpl and find:
{if $use_title_as_link eq true}
{if $url_short neq "http://" && $url_short neq "://"}
<a rel="nofollow" href="{$url}" target="_blank">{$title_short}</a></div>
change to:
{if $use_title_as_link eq true}
{if $url_short neq "http://" && $url_short neq "://"}
<a class="tooltip" rel="nofollow" href="{$url}" target="_blank">{$title_short}<span><img src="http://images.websnapr.com/?url={$url_short}&size=T" alt="{$title_short}" /></span></a></div>
Save.
Open your main CSS file and add:
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #80b62a; color:#6c6c6c;z-index:1;}
Save.
You can change the image provider to whatever you like, I personally use Shrink the Web, as they seem to be the quickest.
This method will show the thumbshot immediately upon hover of the story title, the previous method, had a time delay.
Would love your opinion, leave me a comment below. You can also follow me on Twitter, where I will always help one on one.
Related Search:
- shrinktheweb pligg
