2010-04-08 21:21:47 +00:00
<!doctype html>
< html lang = "en" >
< head >
2011-05-28 00:52:13 +00:00
< meta charset = "utf-8" >
2010-04-08 21:21:47 +00:00
< title > jQuery UI Tooltip - Default demo< / title >
2011-05-28 00:52:13 +00:00
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2011-11-09 15:18:33 +00:00
< script src = "../../jquery-1.7.js" > < / script >
2011-05-28 00:52:13 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.widget.js" > < / script >
< script src = "../../ui/jquery.ui.position.js" > < / script >
< script src = "../../ui/jquery.ui.tooltip.js" > < / script >
< script src = "../../ui/jquery.ui.button.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< style >
label {
display: inline-block; width: 5em;
}
fieldset div {
margin-bottom: 2em;
}
fieldset .help {
display: inline-block;
}
.ui-tooltip {
width: 210px;
}
< / style >
< script >
2010-04-08 21:21:47 +00:00
$(function() {
2011-05-28 00:52:13 +00:00
var tooltips = $( "[title]" )
.click(function() {
$( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
})
.bind( "mouseover focusin mouseleave blur click", function( event ) {
event.stopImmediatePropagation();
})
.tooltip();
$( "< button > " )
.text( "Show help" )
.button()
.toggle(
function() {
tooltips.tooltip( "open" );
},
function() {
tooltips.tooltip( "close" );
}
)
.appendTo( "form" );
2010-04-08 21:21:47 +00:00
});
< / script >
< / head >
< body >
< div class = "demo" >
2011-05-28 00:52:13 +00:00
< form >
< fieldset >
< div >
< label for = "firstname" > Firstname< / label >
< input id = "firstname" name = "firstname" >
< span title = "Please provide your firstname." class = "help ui-state-default ui-corner-all ui-icon ui-icon-help" > ?< / span >
< / div >
< div >
< label for = "lastname" > Lastname< / label >
< input id = "lastname" name = "lastname" >
< span title = "Please provide also your lastname." class = "help ui-state-default ui-corner-all ui-icon ui-icon-help" > ?< / span >
< / div >
< div >
< label for = "address" > Address< / label >
< input id = "address" name = "address" >
< span title = "Your home or work address." class = "help ui-state-default ui-corner-all ui-icon ui-icon-help" > ?< / span >
< / div >
< / fieldset >
< / form >
2010-04-08 21:21:47 +00:00
< / div > <!-- End demo -->
< div class = "demo-description" >
2010-10-26 12:46:41 +00:00
< p > Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.< / p >
2010-04-21 18:00:45 +00:00
< p > A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.< / p >
2010-04-08 21:21:47 +00:00
< / div > <!-- End demo - description -->
< / body >
< / html >
