Tooltip Tooltip widget goes beyond basic browser provided tooltips by feauturing various theming, effects, events and custom content support.

Button

Image

Link

Hover me!

Customized

$(document).puitooltip();
                                
Name Type Default Description
showEvent string mouseover Event to show the tooltip.
hideEvent string mouseout Event to hide the tooltip.
showEffect string fade Effect to display when showing the tooltip.
showEffect string null Effect to display when hiding the tooltip.
showEffectSpeed int/string normal Speed in milliseconds or keywords like slow, normal and fast.
hideEffectSpeed int/string normal Speed in milliseconds or keywords like slow, normal and fast.
my string left top Corner of tooltip relative to target.
at string right bottom Corner of target relative to tooltip.
showDelay int 150 Delay in milliseconds before showing the tooltip.

No events.

Name Parameters Description
show - Displays the tooltip.
hide - Hides the tooltip.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.
$(function() {
        $('#in').puiinputtext(); 

        $('#btn').puibutton(); 

        $(document).puitooltip();

        $('#in').puitooltip({
            showEvent: 'focus',
            at: 'left bottom',
            content: '<img src="./resources/demo/images/galleria/galleria5.jpg" />'
        });
    });
                                
<h3 class="first">Button</h3>
<button type="button" id="btn" title="Lorem ipsum dolor sit amet">Save</button>

<h3>Image</h3>
<img src="./resources/demo/images/galleria/galleria1.jpg" title="Sed do eiusmod tempor incididunt" />

<h3>Link</h3>
<a href="#" title="Consectetur adipisicing elit">Hover me!</a>

<h3>Customized</h3>
<input type="text" id="in" name="in"  value="Focus me!"/>