-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
189 lines (178 loc) · 7.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>tooltip - a javascript tooltip with douban.com style based on jQuery 1.3.2+</title>
<link rel="stylesheet" type="text/css" href="css/tooltip.css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
font: 12px/162% Arial,Helvetica,sans-serif;
}
p {
margin: 0 0 10px;
}
img {
border: 0;
}
.doc {
width: 650px;
margin: 100px auto 50px;
}
.mod-banner {
position: fixed;
z-index: 99998;
_position: absolute;
width: 100%;
height: 55px;
padding-top: 20px;
left: 0;
top: 0;
text-align: center;
background: #333;
color: #FFF;
}
.doc h2 {
margin-top: 25px;
}
.mod-book a {
display: block;
width: 118px;
height: 125px;
}
.mod-code pre {
margin: 15px 0;
padding: 5px 5px 5px 10px;
border-left: 5px solid #CCC;
word-wrap: break-word;
white-space: pre-wrap;
}
#fork {
position: fixed;
_position: absolute;
right: 0;
top: 0;
z-index: 99999;
}
/* 提示框的内容样式，请自行定义 */
.detail-tip {
display: none;
width: 300px;
padding: 13px 13px 10px;
word-wrap: break-word;
}
.detail-tip .color-gray {
color: #666;
}
.detail-tip h2 {
color: #006600;
font: 14px/150% Arial,Helvetica,sans-serif;
margin: 0 0 12px;
}
</style>
</head>
<body>
<div class="doc">
<div class="mod-banner">
<h1>tooltip</h1>
<p>a javascript tooltip with douban.com style based on jQuery 1.3.2+.</p>
</div>
<h2>演示 Demo</h2>
<div class="mod-book">
<a id="target" href="http://book.douban.com/subject/7058465/" fn-tooltip=".detail-tip">
<img alt="爸爸的木朵" src="http://img3.douban.com/mpic/s8869276.jpg" />
<div class="detail-tip">
<h2>爸爸的木朵</h2>
<p class="color-gray">速写本子 / 2012-3 / 华侨出版社 / 36.8 / 平装</p>
<p>“我有一个女儿，我一定好好爱她。”这不是煽情，只是一个父亲心情。父爱不仅是一种态度，也是一种力量。@速写本子用绘画的方式把女儿木朵生活中的点点滴滴，用速写画的方式表现，画出木朵的可爱、木朵的调皮、木朵的求知欲、以及木朵生活中的小故事。画风温馨治愈，很萌很有爱，透着温暖 人心的力量。赋予了绘画之后的人生感悟和一位父亲对女儿含蓄，内敛的爱。表...</p>
</div>
</a>
</div>
<h2>载入 Init</h2>
<div class="mod-code">
<pre>
<link rel="stylesheet" type="text/css" href="css/tooltip.css" />
<script src="js/jquery.js"></script>
<script src="js/tooltip.js"></script>
</pre>
</div>
<h2>配置 Config</h2>
<div class="mod-code">
<pre>
$('#target').tooltip({
content: undefined, // 要显示的提示信息，可以为 jQuery 对象或选择符
event: 'hover', // 提示显示的触发事件，可以为 hover（鼠标移上去）或 click（点击）
width: 'auto', // 提示的宽度
height: 'auto', // 提示的高度
direction: 'right', // 提示显示的位置，仅支持 left（靠左显示） 和 right（靠右显示）
distance: 15, // 提示框与当前元素的间隔
delay: 200, // 当触发事件为 hover 时，延时多少显示<strong>（暂未支持！）</strong>
prefix: 'fn-tooltip' // 样式类的前缀，一般情况下无需提供
});
</pre>
</div>
<p>
<strong>特殊说明</strong>
<br />content 配置项的取值顺序为：优先在目标内部查找；其次为目标的同级元素；最后为全局查找。在使用 jQuery 选择符时推荐仅捕获一个元素。
<br />出于适用性考虑，高宽并不自动计算，提示框内的边距之类也没有预设，推荐自定义提示元素的高宽和样式。
</p>
<h2>用法 Usage</h2>
<div class="mod-code">
<pre>
/* 基于约定的自动初始化，无需手动调用 */
// html
<a href="http://book.douban.com/subject/7014927/" fn-tooltip=".detail-tip">
<img alt="中国神话传说" src="http://img1.douban.com/mpic/s7007041.jpg" />
<div class="detail-tip">
<h2>中国神话传说</h2>
<p class="color-gray">袁珂 / 2012-1-1 / 世界图书出版公司 / 49.80元 / 平装</p>
<p>《中国神话传说:从盘古到秦始皇》是中国神话学专家袁珂先生一生研究成果的集大成之作。其因专业系统且通俗易懂，出版三十年来，受到了国内外读者的广泛欢迎，并且被翻译成俄、日、韩等多种语言。1983年，在《中国神话传说》基础上历经两次重要增补修订而成的《中国神话传说》一书，内容已达原来的四倍，字数六十余万。作者对浩瀚的古文献资料，考辨真伪，订正讹误，...</p>
</div>
</a>
/* 手动初始化，以上面的结构为例（实际使用中，上面的例子会自动初始化） */
$('[fn-tooltip]').each(function() {
var self = $(this), tooltip = $(self.attr('fn-tooltip'));
tooltip.length && self.tooltip({
content: tooltip
});
});
/* 手动初始化，并在外部控制提示是否自动关闭 */
var tooltip = $('#target').tooltip({
content: '.detail-tip'
});
// 当某个按钮点击时，切换提示自动关闭状态
$('#autohide_onoff').click(function() {
tooltip.data('tooltip.autohide', !!! tooltip.data('tooltip.autohide'));
});
</pre>
</div>
<h2>下载 Download</h2>
<p><br /><a href="https://github.com/micate/tooltip">代码托管在 Github 上</a>，<a href="https://github.com/micate/tooltip/zipball/master">直接下载</a>。如遇到问题欢迎 <a href="https://github.com/micate/tooltip/issues">提交 issue</a>。</p>
</div>
<a id="fork" href="https://github.com/micate/tooltip">
<img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<script src="js/jquery.js"></script>
<script src="js/tooltip.js"></script>
<!-- /* analytics code begin -->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffb8afea1e70c3ca0813914e87535eab8' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-7715988-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- analytics code */ -->
</body>
</html>