tooltips/index.html at master · JavRok/tooltips · GitHub

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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Tooltip demo</title>
        <meta name="description" content="Tooltip demo">

		<meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
			body {
				padding: 1em;
			}
			section {
				min-width: 20em;
				margin: 2em auto;
			}
			.box {
				display: block;
				width: 15em;
				min-height: 1em;
				margin: 3em 0;
				padding: 1em;
				line-height: 1.5;
				color: white;
				border: 1px solid #4777AF;
				background: #6797CF;
				border-radius: 4px;
				box-shadow: inset 0 0 0 1px #87B7FF;
				cursor: pointer;
			}

			.box--small {
				width: 5em;
			}

			.icon-circle {
				display: inline-block;
				background: #4777AF;
				width: 1em;
				height: 1em;
				margin-left: 0.5em;
				font-size: 1.5em;
				color: white;
				cursor: pointer;
				text-align: center;
				border: 1px solid black;
				border-radius: 50%;
				vertical-align: baseline;
				line-height: 1;
			}
			.icon::before {
				content: "";
				font-family: "Comic Sans MS", arial, helvetica, sans-serif;
				width: 1em;
				height: 1em;
				speak: none;
				text-decoration: inherit;
				text-transform: none;
				text-rendering: optimizeLegibility;
				-webkit-font-smoothing: antialiased;
			}
			.icon__info::before {
				content: "i";
			}

		</style>

		<link rel="stylesheet" type="text/css" href="tooltip.css">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

		<section>

			<h2>This is the tooltip demo, nothing fancy.

			</h2>
			<p>
				Hover here -> <span class="icon icon-circle icon__info" data-tooltip title="Text is extracted from 'title' attribute if not set in config"></span>
			</p>

			<div class="box" data-tooltip='{"showOn":"load", "orientation":"right", "closeIcon": true}' title="You can set the options in the 'data-tooltip' HTML inline attribute (no JS)">
				Tooltip on load, with options inline
			</div>

			<div class="box box--small" data-tooltip='{"showOn":"click", "orientation":"right"}' title="Tooltips are fully responsive (try resizing or on your mobile phone)">
				Tooltip on click
			</div>

			<div class="box" id="js_example" title="Text is extracted from title attribute if not set in config">
				Tooltip with JS
			</div>

			<label>
				Tooltip on focus
				<input type="text" placeholder="type something" id="input-text">
			</label>


		</section>

		<script type="text/javascript" src="tooltip.js"></script>
		<script type="text/javascript">
			// Simple way of loading. We could use a module bundler like Webpack, RequireJS, etc.
			(function () {
				if (!window.Tooltip) return;
			    var reference = Tooltip.create(
					document.getElementById('js_example'),
					{
						'orientation': 'bottom',
						'showOn': 'hover'
					}
				);

				// Input focus
				var reference2 = Tooltip.create(
					document.getElementById('input-text'),
					{
						'orientation': 'right',
						'showOn': 'focus',
						'text': 'You can set any kind of DOM event, including focus, click, keydown, mouseover... Also this is a different skin',
						'class': 'tooltip-error'
					}
				);
			})();
		</script>

    </body>
</html>