1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
+1 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?

3113 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
chrisakelley says

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

2429 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Microlancer Beta Tester
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
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • 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
  • Bought between 10 and 49 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
_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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • 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
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
+1 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
  • Bought between 10 and 49 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
_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