CSS Pligg Tooltip

icon1 Posted by Geoserv in Featured Articles, Modules, Tutorials on 10 20th, 2009 | Comments | 1,508 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'll check it out the css pligg tooltip in my blog. Thanks..
  • css can really work wonders, right?
  • It is not possible to change the text size of a simple tooltip like this, with html or css. However, you can make your own tooltip and then change the size of that. You are going to need some JavaScript and some css, but it's actually quite simple.
  • A tootip is a few words that pop up when you hover over an object. You can no more put a website in a tooltip that you can pedal a duck - the words may parse, but the concept is nonsense.
  • does it support Google Chrome ?
  • Yes all browsers support it.
  • I am able to display tooltip with strange characters like Chinese in the links in Mozilla FireFox browser perfectly. Whereas the Internet Explorer displays the tooltip for the links differently.
  • CSS İS AWESOME!
  • There are lots of php scripts in the market. I have downloaded and edited pligg, a digg clone-script. What I need is how to make a user (signing up in one of the user authentication script) to sign in Pligg?
  • I'll check it out the css pligg tooltip in my blog. Thanks.
blog comments powered by Disqus