CSS Pligg Tooltip

Posted In Modules, Tutorials - By Geoserv On Tuesday, October 20th, 2009 With 81 Comments

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.

Related Search:

  • shrinktheweb pligg

About - Geoserv has been working with the Pligg CMS for 2+ years.

  • http://www.seolinkvine.ws/zero-down-traffic-blueprint-review-bonus-and-discount.html zero down traffic blueprint

    Sorry for rushing up on this topic, but almost all my registered users have been nagging me on this feature. Any help would be really appreciated.
    '

  • http://www.seolinkvine.ws/zero-down-traffic-blueprint-review-bonus-and-discount.html zero down traffic blueprint

    I've been trying to add a tool tip of a story title to the “Latest comments” section, so that when a user hovers the mouse over a comment, the user can view which post the comment belonged to?

  • http://www.seolinkvine.ws/zero-down-traffic-blueprint-review-bonus-and-discount.html zero down traffic blueprint

    In order to do this, you will need to download the latest version of Simplepie, once downloaded, unzip it, and upload it to your 3rdparty folder. It will take approximately 5 minutes to upload, as it is a huge folder.

  • Merabasera

    thanks for the good article.bye dear take care

  • http://www.berelevantgroup.com Sales enablement

    Thanks for the code! You got a really useful blog I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.

  • http://www.rightwaysolution.com Web Development

    Thanks for information about css pligg tooltip.

  • Fsyfsyfsy

    I cant get this to work I cant find the code to replace

  • http://www.faqpal.com Pliggs

    The code maybe a bit different for the current version.

    Just look for the chunk of code that displays the story title.

  • http://carhireshop.com.au/ Car Hire Shop

    very easy to install. Having no issues so far!

  • Ayub Itinfocube

    well, i m a web developer by profession and i found that your code is very easy and is use of great use..i wanna add that if you wanna change the image provider than in my opinion Shrink the Web is the best option.

  • http://www.incontinencechoice.co.uk/ Incontinence Pads

    This site is cool. i visit here evaryday.

  • http://www.peoplemaps.com/ Psychometric Testing

    keep it up sound really g8.

  • http://www.awesome-weddings.com/ Bridal Wedding Shoes

    In regards the C# programming, i am having trouble adding a tooltip to the columnheader for a list view for there does not seem to be a mouse event for it, any ideas?

  • http://www.komododragonfacts.com Komodo Dragon

    Thanks for pointing out jQuery. Hadn’t heard of it before but seems like a doddle to use and quite efficient over the long run.

  • http://www.spinxwebdesign.com/ Web Design Los Angeles

    Hey I love using CSS in my web design and thank for this great information about Pliggs CSS Tooltip.

  • Anonymous

    That is some inspirational stuff..
    Never knew that opinions could be this varied.

  • http://www.lucaslabels.ie Address Labels

    Happy to see your blog as it is just what I’ve looking for and excited to read all the posts.

  • http://www.lucaslabels.ie Address Labels

    Happy to see your blog as it is just what I’ve looking for and excited to read all the posts.

  • http://www.indiakhoj.in/ Ad agency in Jaipur

    A tooltip is a small popup triggered by a MouseOver that displays quick info about anything.

  • http://www.komododragonfacts.com Komodo Dragon

    Thanks a lot for showing how to use this tooltip.

  • http://www.stellarinfo.com/outlook-pst-file-recovery.htm PST Recovery

    This information useful for me because I am working on CSS. Thank You!!!

  • http://www.meganba.com NBA

    That is some inspirational stuff..
    Never knew that opinions could be this varied.

  • http://www.albenishop.com/ erotic shop

    Great tips..

  • http://www.stellarinfo.com/outlook-pst-file-recovery.htm PST Recovery

    Thanks Darrell. This post is right up my alley and I’m happy to share it with my readers

  • http://www.canvasmemories.ca canvas art toronto

    wooo,,finally i got it. thanks

  • http://www.boldbodyfitness.com/ p90x

    Wish I could get that cup, very nice. And thanks for the tip.

    - Robert

  • http://www.disbeyazltmakalemii.com diş beyazlatma kalemi

    Keep out of reach of children. – People under the age of 16 should consult a dentist before using.
    * Pregnant or nursing women should not use.

  • http://www.extraminds.com/ Social Networking Website

    Great news thanks for sharing

  • http://www.rajpromotions.com/facebook_promotion.html facebook likes

    woo..i am looking for this post finally got it on your blog Pliggs. 

  • http://www.trainingpromotions.com/Category.aspx?ID=3&Name=Business-Training Business Training

    it`s wonder news i impressed with this news thanks

  • Anonymous

    thanks for share