html 实例源码
实例源码：
源代码：
执行
执行中...
1
<!doctype html>2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title>6
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">7
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>8
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>9
<link rel="stylesheet" href="jqueryui/style.css">10
<style>11
.photo {12
width: 300px;13
text-align: center;14
}15
.photo .ui-widget-header {16
margin: 1em 0;17
}18
.map {19
width: 350px;20
height: 350px;21
}22
.ui-tooltip {23
max-width: 350px;24
}25
</style>26
<script>27
$(function() {28
$( document ).tooltip({29
items: "img, [data-geo], [title]",30
content: function() {31
var element = $( this );32
if ( element.is( "[data-geo]" ) ) {33
var text = element.text();34
return "<img class='map' alt='" + text +35
"' src='http://maps.google.com/maps/api/staticmap?" +36
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +37
text + "'>";38
}39
if ( element.is( "[title]" ) ) {40
return element.attr( "title" );41
}42
if ( element.is( "img" ) ) {43
return element.attr( "alt" );44
}45
}46
});47
});48
</script>49
</head>50
<body>51
52
<div class="ui-widget photo">53
<div class="ui-widget-header ui-corner-all">54
<h2>圣史蒂芬大教堂（St. Stephen's Cathedral）</h2>55
<h3><a href="//maps.google.com/maps?q=vienna,+austria&z=11" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3>56
</div>57
<a href="//en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">58
<img src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen's Cathedral）" class="ui-corner-all">59
</a>60
</div>61
62
<div class="ui-widget photo">63
<div class="ui-widget-header ui-corner-all">64
<h2>塔桥（Tower Bridge）</h2>65
<h3><a href="//maps.google.com/maps?q=london,+england&z=11" data-geo="">英国伦敦（London, England）</a></h3>66
</div>67
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java