Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tooltip: Add demo with custom tooltip style.
- Loading branch information
1 parent
924e80e
commit b812596
Showing
2 changed files
with
112 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,111 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>jQuery UI Tooltip - Default functionality</title> | |||
<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css"> | |||
<script src="../../jquery-1.7.js"></script> | |||
<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> | |||
<link rel="stylesheet" href="../demos.css"> | |||
<script> | |||
$(function() { | |||
$( ".demo" ).tooltip({ | |||
open: function(event, ui) { | |||
$("<div>").addClass("arrow").appendTo(ui.tooltip); | |||
}, | |||
position: { | |||
my: "center bottom", | |||
at: "center top", | |||
offset: "0 -20px" | |||
} | |||
}); | |||
}); | |||
</script> | |||
<style> | |||
label { | |||
display: inline-block; | |||
width: 5em; | |||
} | |||
.demo { | |||
margin: 10em 0 0 10em; | |||
} | |||
.ui-tooltip, .arrow:after { | |||
background: black; | |||
border: 2px solid white; | |||
} | |||
.ui-tooltip { | |||
display: inline-block; | |||
position: relative; | |||
padding: 10px 20px; | |||
color: white; | |||
border-radius: 20px; | |||
text-align: center; | |||
font: bold 14px "Helvetica Neue", Sans-Serif; | |||
font-stretch: condensed; | |||
text-decoration: none; | |||
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:after { | |||
content: ""; | |||
position: absolute; | |||
left: 20px; | |||
top: -20px; | |||
width: 25px; | |||
height: 25px; | |||
-webkit-box-shadow: 6px 5px 9px -9px black, | |||
5px 6px 9px -9px black; | |||
-moz-box-shadow: 6px 5px 9px -9px black, | |||
5px 6px 9px -9px black; | |||
box-shadow: 6px 5px 9px -9px black, | |||
5px 6px 9px -9px black; | |||
-webkit-transform: rotate(45deg); | |||
-moz-transform: rotate(45deg); | |||
-ms-transform: rotate(45deg); | |||
-o-transform: rotate(45deg); | |||
} | |||
div[data-tooltip].active { | |||
opacity: 1; | |||
margin-top: 6px; | |||
} | |||
div[data-tooltip].out { | |||
opacity: 0; | |||
margin-top: -20px; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
|
|||
<div class="demo"> | |||
|
|||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached 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.</p> | |||
<p>But as it's not a native tooltip, it can be styled. Any themes built with | |||
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> | |||
will also style tooltips accordingly.</p> | |||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> | |||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> | |||
<p>Hover the field to see the tooltip.</p> | |||
|
|||
</div><!-- End demo --> | |||
|
|||
|
|||
|
|||
<div class="demo-description"> | |||
<p>Hover the links above or use the tab key to cycle the focus on each element.</p> | |||
</div><!-- End demo-description --> | |||
|
|||
</body> | |||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters