TheDrunkenEpic - Filed under 'jQuery'

February 19, 2009

jQuery: Plugin qTips

Hey guys! I've been trying to be a bit more active lately and provide you all with some decent articles. So, because of this, I took some time off my busy schedule last night to sit down and teach myself how to create jQuery plugins. I was trying to figure out what I could develop that would be useful when I was reminded of how many times I tried to implement a javascript-based tooltip solution.

There are plenty of these plugins out there that are dedicated to display tooltips, but I wanted a dirt-simple implementation that didn't require me to mull about CSS code and compatibility issues.

So, I wrote a little plugin that addresses all these inconvenient issues; qTips.

Why 'qTips'? Well, you can quickly add tooltips. So, it's actually quick tips, but qTips sounds catchier.

A Demonstration

Actions speak louder than words, so before I go into this plugin's details, I thought I'd show you all a proof-of-concept demonstration. Just hover your mouse pointer over the boxes and you'll see what happens. A pretty little tooltip will fade in and out with your mouse movements.

For more people, this is all they need.

Implementation

First, you might want to download the plugin package. You'll notice that it comes with the same demo page that I previously linked to.

This plugin is implemented like any other. After you link to your jQuery library's location, you place the following immediately after:

<script src="/path/to/plugin/jquery.qtips.js" type="text/javascript"></script>

Since we need to style the basic implementation of the tooltip, we should add the following CSS to one of your stylesheets:

div.qtip-wrapper {
    z-index: 999;
    text-align: center;
    position: absolute;
    font-size: .9em;
    width: 250px;
    background: transparent url(arrow.png) no-repeat scroll center bottom;
    color: #fff;
    padding-bottom: 5px;
    display: none
}    

    div.qtip-wrapper div {
        background: #333 none;
        padding: 5px;
        font: normal normal .9em/1em "Arial", verdana, sans-serif;
    }

You can substitute the above background image with anything you want, so long as the position information is still intact.

Next, you just implement the plugin and assign it to a selection of some kind. Take the following markup located within the <body> element of a document, for instance:

<body>

Simple enough, but you'd like to include a tooltip that displays some image meta data when someone hovers their mouse over the image. To do this, you just add the following within your document:

<script type="text/javascript">

    $(document).ready(function()
    {
        $('img#product-image-5').qtip({content:'Here is some image info...'});
    });

</script>

This tooltip is now applied to every element within your document that matches the specified selector. Of course, while using jQuery, you can apply a tooltip to just about anything within your page with a single line of code.

Configuration

While this plugin may be a simple tooltip implementation that doesn't mean it lacks functionality. There are several configuration options that you can choose from to fine-tune your tooltips so they display exactly how you want them to. Here is a quick breakdown of the current configuration items and their default values:

container

default: 'qtip'

usage: $(selector).qtip({container:'qtip'});

This allows you to specify a default prefix for the ids assigned to the tooltip elements themselves. Since there may be multiple tooltips displayed at any given time, an incrementor is used and suffixed to the end of the container name to prevent naming conflicts.

content

default: blank

usage: $(selector).qtip({content:'Why, good DAY to you, sir!'});

This is the content you want to display within your tooltip. It can be a string, html markup or even a DOM object.

position

default: 'center'

usage: $(selector).qtip({position:'center'});

choices: left, right, center, bottom

This setting defines the position of the tooltip relative to the matched element.

nudge_top

nudge_top: 10

usage: $(selector).qtip({nudge_top:5});

How many pixels above the matched element you'd like the tooltip to be displayed.

nudge_left

nudge_left: 0

usage: $(selector).qtip({nudge_left:5});

How many pixels to the left of the matched element you'd like the tooltip to be displayed.

Callback Functions

qTips comes with 4 built-in callback functions that are triggered during various phases of the tooltip display. All functions pass the object of the currently matched element as well as the object of the current tooltip.

preRender(e, tip)

usage: $(selector).qtip({preRender:function(e, tip){}});

This is triggered immediately after your mouse enters the boundaries of the matched element, but before anything is actually processed for display.

postRender(e, tip)

usage: $(selector).qtip({postRender:function(e, tip){}});

This is triggered last in the tooltip process; immediately after the tooltip fades away.

onShow(e, tip)

usage: $(selector).qtip({onShow:function(e, tip){}});

This is triggered when the tooltip is pushed out for display.

onHide(e, tip)

usage: $(selector).qtip({onHide:function(e, tip){}});

This is triggered when the tooltip disappears.

Conclusion

This is my very FIRST jQuery plugin, so please, be gentle. I could always use some suggestions and bug reports. I'd like this to be useful for everyone and not just me, so if you'd like to see something that can easily be implemented or you find an instance where it's not working properly, just send me an email or post a comment here.

This has actually been quite a pleasant experience. You don't fully realize the potential of jQuery until you actually take the time to build something off of the framework. Good stuff all around!

I hope you enjoy using it just as much as I did writing it!

qTips for all images:

Thanks to Nick for his lovely comment below, I have decided to post a quick snippet on how you can add a qTip to every image on a page. Just use the following code:

$('img').qtip(
{
    wrapper: 'body',
    position: 'right',
    onShow: function(e, tip)
    {
        $('div', tip).empty().append('

Download

In case you missed it, here is the download link!

You can also find the official qTips project page here on jQuery's plugin repository.

Loading mentions Retweet

Filed under // Code Monkey Development Free Goodies jQuery

Comments [0]

February 10, 2009

jQuery: Mirroring Selections

Ran into pretty interesting situation today while working on a client's administration interface. It made me realize that I'm probably not the first person to run into this.

In one of their sections they have a list of records. At the very top of the list is a select box element that allows you to pick an action and apply it to any chosen records.

Since the list of records is pretty long and requires a lot of scrolling, my client asked if it would be possible to have the same select box appear at the bottom of the list as well. Simple enough, but they also asked if it was possible to have one select box mirror the current selection to the other box at the bottom of the page.

So, to implement this feature, I decided to use a bit of jQuery magic.

The elements in question are both named 'action', so what I did was simply bind a 'change' even using 'select[name=action]' as the selector. Once this event is invoked, it just copies the value of the current box to all other boxes on the screen with the same name.

Take the following code:

$(document).ready(function()
{
    $('select[name=action]').bind('change', function()
    {
        $('select[name=action]').val($(this).val());
    });
});

This isn't anything special, but just shows how jQuery can rise to the challenge of any problem.

Loading mentions Retweet

Filed under // Code Monkey jQuery Tutorials and Such

Comments [0]

September 30, 2008

jQuery: Add another row to a table ...

Here's another quick trick I just learned. We were attempting to allow a user to add more records to an existing form within our updated CRM. This form was represented as a row of a table. Rather than using JavaScript to manually build a new row to display, I did a bit of digging and found the clone() function of jQuery.

Say, we have a table with id of table#image-uploads that basically contains a minature upload form field (with other options) for images. In the last column of this upload form there is an 'add another' link:

add another

Clicking on the link invokes the following JavaScript function:

function addTableRow(table)
{
    $(table).append($(table + ' tr:last').clone());

    return true;
}

First, we pass the identifier to function addTableRow(table). The identifier, in this case, would be #image-uploads. You could also use classnames, ie .table-foo.

We then, using #image-uploads tr:last, take the last row of this table and clone(), or copy, it.

Finally, we just take the contents of the copied table row and then append() the data back onto the table.

There, now they can click that link and add as many extra form fields as they need for their images!

Neat trick, eh? I <3 jQuery. Really, I do!

Loading mentions Retweet

Filed under // Code Monkey Development jQuery Tutorials and Such

Comments [0]

Tags

jQuery

jQuery: Plugin qTips

A Demonstration

Implementation

Configuration

container

content

position

nudge_top

nudge_left

Callback Functions

preRender(e, tip)

postRender(e, tip)

onShow(e, tip)

onHide(e, tip)

Conclusion

qTips for all images:

Download

jQuery: Mirroring Selections

jQuery: Add another row to a table ...