Desco : core JS custom description maker

Exams over, I got quite some free time yesterday, and started coding some custom tooltip functionality and ended up making something that could make hovermenus, tooltips, descriptions, (and whatever you wanna use it for) much easier. The code was great fun and I was quite jubilant after completing it. I called it Desco. I can’t call it a tooltip because it can be used for many more purposes. Technically, a tooltip is something that follows the mouse position. But, this script positions the description in such a way that the center of the hovering element and the center of the description are in the same line.

Use it on your webpage

1. Put in the following HTML code in the <head> section of your webpage –

 <link rel='stylesheet' href='http://zillionhost.xtreemhost.com/desco/desco.thezillion.css' type='text/css' />
 <script src='http://zillionhost.xtreemhost.com/desco/desco.thezillion.js'></script>
 <script>
 win.onload = function(){
 desco.makeDesco();
 }
 </script>

Before using win.onload, make sure that no functions / code has been set for the body’s onload event. If that is so, include that code in the above function.

2. Set the classes of all elements for which you need to display a Desco as ‘show-desco’. To set the text that should be displayed in the desco, set the alt attribute of the element as the text. For example –

<div class='show-desco' alt='Desco text here.'></div>

Customisation

Desco also allows some customization that can be applied to the description. Include the customization code in the parenthesis of the makeDesco() code like this –

<script>
win.onload = function(){
desco.makeDesco({
property1: 'value1', // Don't forget the comma which should be there before putting a new property
property2: 'value2'
});

}
</script>

The following properties can be used for customization  –

1. shadow – Sets the box-shadow of the description. Value should be set in the way you write it in CSS3. Eg – shadow: ‘0 0 4px black’  Default is no shadow.

2. distance – Sets the distance of the description from the element in pixels. Value should be set as an integer. Eg – distance: 4  Default is 10.

3. location – Sets whether the description should be placed above or below the hovered element. Value should be ‘above’ or ‘below’. Eg – location: ‘above’  Default is ‘below’

4. softcorners – Sets the border-radius of the description. Value should be set in the way you write it in CSS3. Eg – softcorners: ‘6px’  Default is ‘6px’.

5. fontsize – Sets the font-size of the description text. Value should be set in the way you write it in CSS3. Eg – fontsize: ‘6px’  Default is ’12px’.

6. followmouse – Sets whether the description should follow the mouse or not. If this property is not set (or set to false), the description displays below the element in a centralized manner. Value should be either true or false (without quotes). The upward or downward arrow will be removed if this property is set to true. Eg – followmouse: true  Default is false.

Code

The positioning of the desco is done by applying some calculations to the element’s co-ordinates, height, width and some more determinants. The desco element’s co-ordinates are set according to it. The center of the description and the center of the hovered element are equidistant from the left end of the browser, which is aquired with awesome code. I’ll put in the complete code explanation in some time. Don’t have time right now. 😛

Here’s a demo – http://jsfiddle.net/thezillion/5geRt/

Hope you like it. Please send me your feedbacks, preferably here.

Advertisements

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