"Templating" in jQuery - sharing some values between selectors

Question

Another newbie question. I had a question about creating a tooltip on focus, which works. The solution leads me to something like this:

$("input[id$=tbMyTextbox]").qtip({
    content: 'Test',
    position: {
        corner: {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
        }
    },
    show: {
        when: {
            event: 'focus'
        }
    },
    hide: {
        when: {
            event: 'blur'
        }
    }
});

While that works, I need to implement many tooltips, and each time I only need to change the Selector and content-Attribute, while everything else is the same.

Is there a generic way in jQuery to put settings in a common place? Kinda like subclassing.

I'm not interested in any server-side solution of generating the jQuery code in a loop (due to a) some technical limitations and b) my desire to learn jQuery).

Answer 1

var defaultStyle =  {
    content: 'Test',
    position: { 
                corner: {
                            target: 'rightMiddle',
                            tooltip: 'leftMiddle'
                        }
                },
    show: { when: { event: 'focus' } },
    hide: { when: { event: 'blur' } }
}

//extend method will 'merge' defaultStyle with the second object that you have supplied, overriding properties in defaultStyle object if it exists in the second object. 

//myTextBoxStyle will have target as 'leftMiddle' and everything else from the default Style.
var myTextBoxStyle = $.extend(defaultStyle, { position : { corner { target : 'leftMiddle' } } });

$("input[id$=tbMyTextbox]").qtip(myTextBoxStyle);

Answer 2

I've been playing this days with the qtip plugin, and I can recommend you to store your content of your tooltips on the title attribute of the DOM elements:

$("input[title]").qtip({ // All input elements that have a title attribute
    content: {
       text: false // Use each elements title attribute
    },
    position: {
        corner: {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
        }
    },
    show: {
        when: {
            event: 'focus'
        }
    },
    hide: {
        when: {
            event: 'blur'
        }
    }
});

...


<input type="text" title="My Tooltip"/>
<input type="checkbox" title="Another Tooltip"/>