CSS Pligg Tooltip

icon1 Posted by Geoserv in Featured Articles, Modules, Tutorials on 10 20th, 2009 | View Comments | 3,706 views

img_1705Back 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:

<div id="ls_thetitle-{$link_shakebox_index}" class="toptitle">
                        {if $use_title_as_link eq true}
                                {if $url_short neq "http://" &amp;&amp; $url_short neq "://"}
                                        <a rel="nofollow" href="{$url}" target="_blank">{$title_short}</a></div>

change to:

<div id="ls_thetitle-{$link_shakebox_index}" class="toptitle">
                        {if $use_title_as_link eq true}
                                {if $url_short neq "http://" &amp;&amp; $url_short neq "://"}
                                        <a class="tooltip" rel="nofollow" href="{$url}" target="_blank">{$title_short}<span><img src="http://images.websnapr.com/?url={$url_short}&amp;size=T" alt="{$title_short}" /></span></a></div>

Save.

Open your main CSS file and add:

a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;}

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.

You can see it in action at FAQPAL.

Arvixe

If you enjoyed this post, make sure you subscribe to my RSS feed!

  • I think this will greatly help me. And this is easy to configure also.
  • Basically the purpose is not to write the tool-tip text inline

  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline
  • Basically the purpose is not to write the tool-tip text inline

blog comments powered by Disqus