TOOLTIP PLUGIN V1

HTML

<img src="http://i42.tinypic.com/2q85aio.png" class="tooltip" title="This is a tooltip!" />

<img src="http://i42.tinypic.com/2q85aio.png" class="tooltip" title="This is a second tooltip!" />

CSS

body,html { margin:50px; }

JavaScript

$.fn.lbTooltip = function( options ) {    
    /* options
       text-wrap: What if text is extremely long, do we want to limit the width of the div? If so, do we limit by PX or relative to the parent element?
       nodes: Does the tooltip need to be an img or a with a title attr? What about other elements like DIVs and SPANs?
       position: What if the target element is at the end of the screen, will the tooltip be cut off? If so, should we push the tooltip to the left of the parent element? Same for left-side placement.   
       inline-css:At the moment, we're creating the CSS as inline so can't override in a stylesheet. Should this be modified? E.g. create the classes in a stylesheet and use AddClass() instead?
    */
        
    //default settings
    var defaults = {
        theme: 'grey'
    };
    
    //extend defaults for custom-options
    var options = $.extend(defaults, options);   
    //variables, these are the default theme options (grey), but can be changed accordingly
    var vars = {
        border: true, //does the tooltip need a border? if false, the next four variables will be ignored.
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#D8D8D8',
        borderRadius: 5,
        bgColor: '#F2F2F2',
        padding: 10
    };
    
    if(options.theme) {
        switch (options.theme) {
            case 'red':
                vars.borderColor = '#F78181',
                vars.bgColor = '#F5A9A9'
                break;
            case 'orange': 
                vars.borderColor = '#FE9A2E',
                vars.bgColor = '#FA8258'
                break;
            case 'yellow': 
                vars.borderColor = '##FFFF00',
                vars.bgColor = '#F3F781'
                break;
            case 'green': 
                vars.borderColor = '#74DF00',
                vars.bgColor = '#82FA58'
                break;
            case 'blue':
                vars.borderColor = '#0080FF',
               ...