JqueryTools - tooltip test

Setting up click test for tooltips.

by goldfingerxyz

HTML

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<div id="buttons">
    <label for="text1">Text 1</label>
    <input id="text1" type="text" title="This is the tooltip<br />for input 1" />
    <button id="button1" title="This is the tooltip<br />for button 1">?</button>
    <br />
    <label for="text2">Text 2</label>
    <input id="text2" type="text" title="This is the tooltip<br />for input 2" />
    <button id="button2" title="This is the tooltip<br />for button 2">?</button>
</div>

CSS

#buttons
{
    margin:100px;
    padding:20px;
}
.tooltip {
    font-family:tahoma;
    background-color: #000000;
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 10px #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    padding: 10px 15px;
    text-align: left;
    width: 200px;
}

JavaScript

$("button[title]").tooltip({
    events: {
        def:     "mouseenter,mouseleave",    // default show/hide events for an element
        input:   "focus,blur",               // for all input elements
        widget:  "focus click,blur",  // select, checkbox, radio, button
        tooltip: "mouseenter,mouseleave"     // the tooltip element
    }
});