Skip to content

Commit 2a92b3a

Browse files
scottgonzalezscottgonzalez
committed
Tooltip: Change default collision detection to 'flip fit' since the default vertical positioning is centered and can't flip
1 parent a1f9ca7 commit 2a92b3a

File tree

3 files changed

+66
-46
lines changed

3 files changed

+66
-46
lines changed

‎demos/tooltip/delegation-mixbag.html

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,80 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>jQuery UI Tooltip - Default demo</title>
5-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
7-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.5.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.tooltip.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
.photo {
15+
width: 300px;
16+
text-align: center;
17+
}
18+
.photo .ui-widget-header {
19+
margin: 1em 0;
20+
}
21+
</style>
22+
<script>
1323
$(function() {
14-
$(".demo").tooltip({
15-
items: "[href], [title]",
16-
content: function(response) {
17-
var href = $(this).attr("href");
18-
if (/^#/.test(href)) {
19-
return $(href).html();
20-
} else if (href) {
21-
$.get(href, response);
22-
return "loading...";
24+
$( ".demo" ).tooltip({
25+
items: "img, [data-geo], [title]",
26+
content: function() {
27+
var element = $( this );
28+
if ( element.is( "[data-geo]" ) ) {
29+
return $( "<iframe>", {
30+
width: 425,
31+
height: 350,
32+
frameborder: 0,
33+
scrolling: "no",
34+
marginheight: 0,
35+
marginwidth: 0,
36+
src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) +
37+
"&z=11&t=p&output=embed"
38+
});
39+
}
40+
if ( element.is( "[title]" ) ) {
41+
return $( this ).attr( "title" );
42+
}
43+
if ( element.is( "img" ) ) {
44+
return $( this ).attr( "alt" );
2345
}
24-
return this.title;
2546
}
2647
});
27-
$("#footnotes").hide();
2848
});
2949
</script>
30-
<style>
31-
label { display: inline-block; width: 5em; }
32-
</style>
3350
</head>
3451
<body>
3552

3653
<div class="demo">
37-
<ul>
38-
<li>
39-
<a href="#footnote1">I'm a link to a footnote.</a>
40-
</li>
41-
<li>
42-
<a href="#footnote2">I'm another link to a footnote.</a>
43-
</li>
44-
</ul>
45-
<input title="This is just an input, nothing special" />
46-
47-
<ul>
48-
<li>
49-
<a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
50-
</li>
51-
<li>
52-
<a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
53-
</li>
54-
</ul>
55-
56-
<div id="footnotes">
57-
<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
58-
<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
54+
55+
<div class="ui-widget photo">
56+
<div class="ui-widget-header ui-corner-all">
57+
<h2>St. Stephen's Cathedral</h2>
58+
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="48.208174,16.373819">Vienna, Austria</a>.</h3>
59+
</div>
60+
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
61+
<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral">
62+
</a>
63+
</div>
64+
65+
<div class="ui-widget photo">
66+
<div class="ui-widget-header ui-corner-all">
67+
<h2>Tower Bridge</h2>
68+
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="51.500152,-0.126236">London, England</a>.</h3>
5969
</div>
70+
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
71+
<img src="images/tower-bridge.jpg" alt="Tower Bridge">
72+
</a>
73+
</div>
74+
75+
<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
76+
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
77+
6078
</div><!-- End demo -->
6179

6280

‎tests/unit/tooltip/tooltip_defaults.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ commonWidgetTests( "tooltip", {
55
items: "[title]",
66
position: {
77
my: "left+15 center",
8-
at: "right center"
8+
at: "right center",
9+
collision: "flip fit"
910
},
1011
tooltipClass: null,
1112

‎ui/jquery.ui.tooltip.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ $.widget( "ui.tooltip", {
2525
items: "[title]",
2626
position: {
2727
my: "left+15 center",
28-
at: "right center"
28+
at: "right center",
29+
collision: "flip fit"
2930
},
3031
tooltipClass: null
3132
},

0 commit comments

Comments
 (0)