YouTip

" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); .ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; }

Tooltips can be bound to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

But since it's not a native tooltip, it can be styled. Themes created with ThemeRoller can style the tooltips accordingly.

Tooltips can also be used for form elements, to show some extra information in each field.

Your age:

Hover the field to see the tooltip.

## Custom Animation This example demonstrates how to customize the animation using the show and hide options, as well as using the open event for custom animation. $(function() { $( "#show-option" ).tooltip({ show: { effect: "slideDown", delay: 250 } }); $( "#hide-option" ).tooltip({ hide: { effect: "explode", delay: 250 } }); $( "#open-event" ).tooltip({ show: null, position: { my: "left top", at: "left bottom" }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); });

There are many ways to customize the tooltip animation.

You can use the show and hide options.

You can also use the open event.

## Custom Content Demonstrates how to combine different event delegation tooltips into a single instance by customizing the items and content options. You may need to interact with map tooltips, which is a feature to be implemented in a future version. .photo { width: 300px; text-align: center; } .photo .ui-widget-header { margin: 1em 0; } .map { width: 350px; height: 350px; } .ui-tooltip { max-width: 350px; } $(function() { $( document ).tooltip({ items: "img, , ", content: function() { var element = $( this ); if ( element.is( "" ) ) { var text = element.text(); return ""; } if ( element.is( "" ) ) { return element.attr( "title" ); } if ( element.is( "img" ) ) { return element.attr( "alt" ); } } }); });

All images are from Wikimedia Commons and are licensed under CC BY-SA 3.0 by their respective owners.

## Form Use the button below to show the help text, or just hover over or focus the input to show the help text for that input. A fixed width is defined in the CSS to make all help texts appear consistent when shown simultaneously. label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } $(function() { var tooltips = $( "" ).tooltip(); $( "" ) .text( "Show help" ) .button() .click(function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); });

First name

Last name

Address

## Follow Mouse The tooltip in this example is positioned relative to the mouse, and will follow the mouse as it moves over the element. label { display: inline-block; width: 5em; } $(function() { $( document ).tooltip({ track: true }); });

Tooltips can be bound to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

But since it's not a native tooltip, it can be styled. Themes created with ThemeRoller can style the tooltips accordingly.

Tooltips can also be used for form elements, to show some extra information in each field.

Your age:

Hover the field to see the tooltip.

## Video Player A mock video player with like/share/stats buttons, each with a custom styled tooltip. .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } .ui-tooltip { border: 1px solid white; background: rgba(20, 20, 20, 1); color: white; } .set { display: inline-block; } .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } $(function() { function notify( input ) { var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() ); $( "

" ) .appendTo( document.body ) .text( msg ) .addClass( "notification ui-state-default ui-corner-bottom" ) .position({ my: "center top", at: "center top", of: window }) .show({ effect: "blind" }) .delay( 1000 ) .hide({ effect: "blind", duration: "slow" }, function() { $( this ).remove(); }); } $( "button" ).each(function() { var button = $( this ).button({ icons: { primary: $( this ).data( "icon" ) }, text: !!$( this ).attr( "title" ) }); button.click(function() { notify( button ); }); }); $( ".set" ).buttonset({ items: "button" }); $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", }, show: { duration: "fast" }, hide: { effect: "hide" } }); });

Video goes here (HTML5?)

Like I don't like this video Share Flag as inappropriate