-
Notifications
You must be signed in to change notification settings - Fork 10
/
example.html
107 lines (106 loc) · 5.88 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>Tooltip.js - A basic mouseover tooltip script</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/tooltip.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="fullwidth header-wrapper">
<div class="page-container">
<div id="header">
<div id="teaser">
<h1>Tooltip.js</h1>
<div>
<h2>A basic mouseover tooltip script</h2>
</div>
<a href="https://github.com/matthias-schuetz/Tooltip" class="button button-download">
<span class="label">Download</span>
</a>
</div>
</div>
</div>
</div>
<div class="fullwidth">
<div id="content" class="fullwidth">
<div class="fullwidth">
<div class="page-container">
<div class="block">
<h2 class="block-head block-passage">Tooltips through data-attributes</h2>
<p>This tooltip script is a basic example of how <span class="pre">data</span> attributes can be used to add a tooltip functionality to DOM elements. The tooltips are created for each element by reading out the <span class="pre">title</span> attribute. Additionally the tooltip offset can be configured by passing a JSON option string to the <span class="pre">data</span> attribute. This concept comes from <a href="http://angularjs.org">AngularJS</a> and provides a quick extensibility.</p>
</div>
</div>
</div>
<div class="fullwidth separator">
<div class="page-container">
<div class="block">
<h2 class="block-head">Demo</h2>
<p>
<span data-tooltip title="I'm a tooltip text" class="cursor">Tooltip demo 1 (hover here)</span>
</p>
<p>
<span data-tooltip="{ 'offset': 30, 'class': 'alt-tooltip' }" title="I'm another tooltip text" class="cursor">Tooltip demo 2 (hover here)</span>
</p>
</div>
</div>
</div>
<div class="fullwidth separator">
<div class="page-container">
<div class="block">
<h2 class="block-head">Facts</h2>
<p>Here are some key facts that should provide a short overview of what Tooltip.js is and how it works:</p>
<ul class="list">
<li>Configuration via HTML and data attributes</li>
<li>Customizable via CSS</li>
<li>Extensible (JavaScript code is about 150 lines)</li>
<li>Runs in all major browsers and Internet Explorer 9+</li>
<li>No external dependencies</li>
</ul>
<p>So the script is very basic and can be extended with various features. It's meant to be a learning example of how a tooltip functionality can be realized by using <span class="pre">data</span> attributes and parsing JSON string options.</p>
</div>
</div>
</div>
<div class="fullwidth separator">
<div class="page-container">
<div class="block">
<h2 class="block-head">Usage</h2>
<p>After <a href="https://github.com/matthias-schuetz/Tooltip">downloading the package</a> from GitHub, you just need to include the JavaScript file in the HTML code of your site. That's it. Any further configuration is optional. From this point, when the HTML page has been loaded, all elements having the <span class="pre">data</span> attribute "data-tooltip" will be processed and provided with the tooltip functionality. The tooltip text comes from an additional <span class="pre">title</span> attribute. A sample element looks like this:</p>
<pre>
<div <span>data-tooltip</span> <span>title</span>=<span class="alt">"I'm a tooltip text"</span>>Demo</div></pre>
<p>You can also specify additional options to define a custom offset or a CSS class for each tooltip by using a JSON option string:</p>
<pre>
<div <span>data-tooltip=<span class="alt">"{ 'offset': 10, 'class': 'alt-tooltip' }"</span></span> <span>title</span>=<span class="alt">"I'm a tooltip text"</span>>Demo</div></pre>
<p>This would set the tooltip offset (relative to the mouse cursor) to 10 pixels for this element. It has to be said that this is a very basic implementation of parsing a JSON option string. So you'll have to use the single quotes for attributes in order to make <span class="pre">JSON.parse</span> work. If you want to omit the single quotes you could use a library like the <a href="https://github.com/politician/relaxed-json-parser">relaxed JSON parser</a>.</p>
<p>In addition you may set the default options which contain values for <em>tooltipId</em> and <em>offsetDefault</em>. This will affect all tooltips on the page. You can do this by using the following code:</p>
<pre>
tooltip.setOptions({
tooltipId: "example",
offsetDefault: 20
});</pre>
<p>Finally we will have a look at the CSS configuration of the tooltip. There's always one <span class="pre">div</span> element added and removed to the <span class="pre">body</span> element when hovering over a tooltip source element. By default this <span class="pre">div</span> element has the <span class="pre">id</span> "tooltip". So the CSS is very basic to style the tooltip:</p>
<pre>
#tooltip {
position:absolute;
background:#DB2A64;
color:#ffffff;
padding:8px;
}</pre>
<p>That's all. As the Tooltip.js script is very basic, all tooltips on a page share the same look. You can go ahead and extend the script if you want to use different styles for each tooltip.</p>
</div>
</div>
</div>
<div class="fullwidth footer">
<div class="page-container">
<div class="block">
<p>Tooltip.js is developed by <a href="https://github.com/matthias-schuetz">Matthias Schuetz</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="js/Tooltip.js" type="text/javascript"></script>
</body>
</html>