free jQuery plugin: ‘dataPanel’ flexible tooltip

I was looking around recently for a jQuery tooltip plugin. I wanted a bit more flexibility in styling the content of the tooltip than the ones I found though… basically I wanted more than just ‘title’ and ‘description’.

More of an informational panel than a little tooltip, hence ‘dataPanel’.

In the one I made you can have an arbitrary number of fields within the tooltip div – you just pass the plugin a css selector for each one when you attach it to your source element.

The content of the tooltip should be saved on the source element as jQuery data fields. This works well for my use case… which was a list of thumbnail images retrieved by Ajax via the Picasa API.

Currently you need to create the hidden tooltip div manually, in advance. For proper ‘unobtrusive’ goodness this should maybe happen automatically.

Otherwise it’s straightforward to setup: pass in the tooltip element and an options object, with a fieldMap object containing a mapping of css selectors to data fields.

To attach:

$(src_el).dataPanel($(tooltip_el),{
    fieldMap: [
        { selector: '.__title', fieldName: 'title'},
        { selector: '.__date', fieldName: 'humane date'},
        { selector: '.__description', fieldName: 'description'}
    ]
});

The hidden tooltip div in this case would look like:

<div id="photo_info">
    <h2 class="__title"></h2>
    <h4 class="__date"></h4>
    <div class="__description"></div>
</div>

Have a look at the demo page below. You’ll notice the tooltip is well behaved when it reaches the edge of the window – no nasty scrollbars. If you look in the js source you’ll also see there are a few other options you can pass along with the fieldMap.

Demo page:
http://anentropic.com/code/datapanel.html

The javascript file:
http://anentropic.com/code/js/jquery.datapanel.js

Any feedback, I’d love to hear from you 🙂

Advertisements

About anentropic
songwriter, musician, and er web programmer...

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: