aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tooltip
diff options
context:
space:
mode:
Diffstat (limited to 'demos/tooltip')
-rw-r--r--demos/tooltip/custom-content.html10
-rw-r--r--demos/tooltip/custom-style.html101
-rw-r--r--demos/tooltip/forms.html33
3 files changed, 61 insertions, 83 deletions
diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html
index 41739cfa7..3b3308153 100644
--- a/demos/tooltip/custom-content.html
+++ b/demos/tooltip/custom-content.html
@@ -30,9 +30,11 @@
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
- return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
+ var text = element.text();
+ return "<img class='map' alt='" + text +
+ "' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
- element.text() + "'>";
+ text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
@@ -52,7 +54,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>St. Stephen's Cathedral</h2>
- <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo>Vienna, Austria</a></h3>
+ <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo>Vienna, Austria</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
@@ -62,7 +64,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>Tower Bridge</h2>
- <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo>London, England</a></h3>
+ <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo>London, England</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
diff --git a/demos/tooltip/custom-style.html b/demos/tooltip/custom-style.html
index 4d48616cb..633da3d95 100644
--- a/demos/tooltip/custom-style.html
+++ b/demos/tooltip/custom-style.html
@@ -13,76 +13,67 @@
<script>
$(function() {
$( ".demo" ).tooltip({
- open: function(event, ui) {
- $("<div>").addClass("arrow").appendTo(ui.tooltip);
- },
position: {
- my: "center bottom",
+ my: "center bottom-20",
at: "center top",
- offset: "0 -20px"
+ using: function( position, feedback ) {
+ $( this ).css( position );
+ $( "<div>" )
+ .addClass( "arrow" )
+ .addClass( feedback.vertical )
+ .addClass( feedback.horizontal )
+ .appendTo( this );
+ }
}
});
});
</script>
<style>
- label {
- display: inline-block;
- width: 5em;
- }
- .demo {
- margin: 10em 0 0 10em;
- }
.ui-tooltip, .arrow:after {
- background: black;
- border: 2px solid white;
+ 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;
+ 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;
+ 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);
+ .arrow.top {
+ top: -16px;
+ bottom: auto;
}
- div[data-tooltip].active {
- opacity: 1;
- margin-top: 6px;
+ .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);
}
- div[data-tooltip].out {
- opacity: 0;
- margin-top: -20px;
+ .arrow.top:after {
+ bottom: -20px;
+ top: auto;
}
</style>
</head>
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html
index ec01396a7..6440bf89e 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -27,26 +27,14 @@
</style>
<script>
$(function() {
- var tooltips = $( "[title]" )
- .click(function() {
- $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
- })
- .bind( "mouseover focusin mouseleave blur click", function( event ) {
- event.stopImmediatePropagation();
- })
- .tooltip();
+ var tooltips = $( "[title]" ).tooltip();
$( "<button>" )
.text( "Show help" )
.button()
- .toggle(
- function() {
- tooltips.tooltip( "open" );
- },
- function() {
- tooltips.tooltip( "close" );
- }
- )
- .appendTo( "form" );
+ .click(function() {
+ tooltips.tooltip( "open" );
+ })
+ .insertAfter( "form" );
});
</script>
</head>
@@ -58,18 +46,15 @@
<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>
+ <input id="firstname" name="firstname" title="Please provide your firstname.">
</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>
+ <input id="lastname" name="lastname" title="Please provide also your lastname.">
</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>
+ <input id="address" name="address" title="Your home or work address.">
</div>
</fieldset>
</form>
@@ -79,7 +64,7 @@
<div class="demo-description">
-<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>
+<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
</div><!-- End demo-description -->
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-03 04:55:45 +0000