1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says

I’ve been looking around, and it seems there are tons of jquery tooltip plugins, but I can’t seem to find the right one and I was hoping you guys might know of some good ones.

Basically, I’m trying to do what happenns on TF’s homepage, where there is a thumbnail that when hovered over shows an enlarged image preview, but then also links to a page.

This is essentially what I’m looking for…

http://cssglobe.com/lab/tooltip/02/

But it’s missing two things:

  • With the above example, the url of the enlarged image preview needs to be in the anchor tag, and thus the link has to go to that picture (not another page).
  • There’s no detection for where you are in the browser window to effect which way the tooltip pops out. I’ve seen many standard tooltips that have this feature, and also TF’s homepage does this.

Any ideas on plugins that I could use?

3266 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says

I think http://craigsworks.com/projects/qtip/ could do what you want its a pretty awesome tooltip plugin

2459 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact says

Hey Jason,

I’ve used the script from CSS Globe for my WP blog, using post thumbnails. I wanted to write a tut on this, but meanwhile, hope this helps you :)

So here’s how I did it:

Step 1: The WP code


<?php global $wpdb; $attachment_id = $wpdb?>get_var("SELECT ID FROM $wpdb->posts WHERE post_parent = '$post->ID' 
AND post_status = 'inherit' AND post_type='attachment' ORDER BY post_date DESC LIMIT 1");
                $tip = wp_get_attachment_url($post->ID);

if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="screenimg">

<a href="&lt;?php the_permalink() ?&gt;" class="tip" rel="&lt;?php echo wp_get_attachment_url($attachment_id); ?&gt;">&lt;?php the_post_thumbnail(array(330, 190)); ?&gt;</a>

</div>

&lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;

Step 2: The Javascript


/*
 * Url preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.screenshotPreview = function(){    
    /* CONFIG */

        xOffset = 10;
        yOffset = 20;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    jQuery("a.tip").hover(function(e){
        this.t = this.title;
        this.title = "";    
        jQuery("body").append("<p id="screenshot"><img src="\"+ this.rel +\"" alt="Theme Preview Loading..." />"+"</p>");                                 
        jQuery("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("normal");                        
    },
    function(){
        this.title = this.t;    
        jQuery("#screenshot").remove();
    });    
    jQuery("a.tip").mousemove(function(e){
        jQuery("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};

// starting the script on page load
jQuery(document).ready(function(){
    screenshotPreview();

    jQuery(".tip img").removeAttr('title');
});

That’s it.

Now all you need to do is style it with CSS .

By the way, many thanks to Paz for the idea of using the thumbnail URL in the rel attribute. Thanks Paz!

Indeed, it doesn’t detect the viewport; I think Kriesi wrote a tut on his blog for creating a tooltip that does this. And I think you can use the same approach with th rel attribute for the preview URL .

EDIT : as usual, code is not showing up properly on the forums. Use these links for the WP code and the JS code. Cheers!

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says

personal opinion. Take a day off and learn jQuery (yeah, that’s all you need to learn jQuery at a medium level if you are a fast learner).

Start by watching jQuery Essential Training from Lynda.com (it’s paid, but its DAMN worth it).

I started learning jQUery from Lynda.com and with that and lots of practive I even manage to develop fancy sliders, tooltips and a totally ajax/jquery driven photo gallery.

By oing it yourself, you’ll have more control over your website, and better yet, when you do need to provide support, you know what to do…

=D

444 posts
  • Has been part of the Envato Community for over 4 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
TahaH-Studio says
personal opinion. Take a day off and learn jQuery (yeah, that’s all you need to learn jQuery at a medium level if you are a fast learner).

Start by watching jQuery Essential Training from Lynda.com (it’s paid, but its DAMN worth it).

I started learning jQUery from Lynda.com and with that and lots of practive I even manage to develop fancy sliders, tooltips and a totally ajax/jquery driven photo gallery.

By oing it yourself, you’ll have more control over your website, and better yet, when you do need to provide support, you know what to do…

=D

+1000

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says
personal opinion. Take a day off and learn jQuery (yeah, that’s all you need to learn jQuery at a medium level if you are a fast learner).

Start by watching jQuery Essential Training from Lynda.com (it’s paid, but its DAMN worth it).

I started learning jQUery from Lynda.com and with that and lots of practive I even manage to develop fancy sliders, tooltips and a totally ajax/jquery driven photo gallery.

By oing it yourself, you’ll have more control over your website, and better yet, when you do need to provide support, you know what to do…

=D

But that’s not always the best path to follow. Sure, its good, but why waste time making your own plugin when there are so many good ones out there already? That’s like saying don’t make WordPress themes, just learn PHP and make your own CMS :-S

On the subject of tooltips, I agree with the first reply – qTip is great!

444 posts
  • Has been part of the Envato Community for over 4 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
TahaH-Studio says

@_rohan , I think DD meant that I would help him understanding the code that he is using and makes his code more neater. Also again as DD mentioned, it will be useful when it comes to supporting buyers of your theme. You want to understand what they are asking if it was about jQuery in your theme or so. I’d say check on NetTuts+ in the Basix section. Jeff did some great series to get you started with jQuery.

Also I believe, contributing your own plugins raises the price of your theme.

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says
@_rohan , I think DD meant that I would help him understanding the code that he is using and makes his code more neater. Also again as DD mentioned, it will be useful when it comes to supporting buyers of your theme. You want to understand what they are asking if it was about jQuery in your theme or so. I’d say check on NetTuts+ in the Basix section. Jeff did some great series to get you started with jQuery. Also I believe, contributing your own plugins raises the price of your theme.

Exactly.

I’m not saying I NEVER use plugins. I do. But plugin is one thing. Scripts are other. By plugin I mean hoverIntent, fancybox (which is more of a script) or that color animation plugin. But to develop sliders and tooltips… do it yourself… you’ll have more freedom and do exactly what you want…

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says

@digitalimpact Thanks for taking the time to do that. Really appreciated.

@The rest of the gang

I definitely am no jQuery all star, but I do write my own jQuery for little elements of my themes, and I use plugins, as well. I don’t agree that for things like sliders and tooltips, it’s necessarily a good idea to write them yourself. The reason is because the people that develop a lot of these plugins often don’t just make it work, they dot the i’s and cross the t’s. They dedicate themselves getting it just right. I’d rather use their work over wasting my time creating my own from scratch, especially when there are so many of these types of plugins and tutorials on the net. To date, I don’t believe I have had one jQuery or javascript question from a buyer that I couldn’t handle. So, the plugin route seems to be working for me :-)

Ha and besides, the whole reason this thread was started was not because I was doing anything for a theme I’m selling on TF. At work I was given 20 hours of development time to take the PSD design I’ve been handed by the design department and turn into a full Wordpress site with content and everything. I don’t have time to be writing jquery plugins from scratch before first asking the community if it exists somewhere else already.

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says
I’m not saying I NEVER use plugins. I do. But plugin is one thing. Scripts are other. By plugin I mean hoverIntent, fancybox (which is more of a script) or that color animation plugin. But to develop sliders and tooltips… do it yourself… you’ll have more freedom and do exactly what you want…

Well, I guess its a matter of opinion. Personally I would never unnecessarily write a plugin unless thee was nothing that suited my purposes. It’s happened, and it was definitely a learning experience.

@themeblvd: +1. I agree!

by
by
by
by
by
by