-
Notifications
You must be signed in to change notification settings - Fork 0
/
simple-tooltips.html
62 lines (51 loc) · 4.08 KB
/
simple-tooltips.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<title>Simple Tooltips Demo</title>
<style>
html,
body {
width:100%;
height: 100%;
margin:0;
padding:0
}
body {
font: normal normal normal 62.5%/1 serif;
font-size: calc(1em * .625)
}
p {
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 50%;
margin-top: -1.25em;
padding: 0 2%;
text-align: center;
line-height: 1.25;
font-size: 1.6em
}
/*! Note: these CSS rules version includes some effects not available into the simple-tooltip.min.css file */
a.tooltip{position:relative}.tooltips a.tooltip:after,.tooltips a.tooltip:before{visibility:hidden;opacity:0;position:absolute;z-index:999;overflow:hidden;transition:transform 200ms ease,opacity 200ms;pointer-events:none}.tooltips a.tooltip:before{content:attr(aria-label);display:block;top:150%;width:inherit;padding:10px 15px;background:#000;color:#fff;text-decoration:underline;text-transform:none;letter-spacing:.05rem;word-break:keep-all;hyphens:none;font:normal 400 normal 12px/1.2 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;border-radius:2px}.tooltips a.tooltip:after{content:'';width:0;height:0;border:6px solid transparent}.tooltips a.tooltip:hover:after,.tooltips a.tooltip:hover:before{visibility:visible;opacity:0.85;text-decoration:none;transform:translateY(0);transition:transform 0.4s ease-in-out,opacity 0.4s ease-in-out}.tooltips a.tooltip--top:before{top:auto;left:0%;bottom:99%;margin-bottom:10px;transform:translateY(20px)}.tooltips a.tooltip--top:after{bottom:100.1%;left:8px;margin-bottom:4px;border-top-color:#000;border-bottom:none;transform:translateY(20px)}:dir(rtl) a.tooltip--top::before{right:0;left:auto}:dir(rtl) a.tooltip--top::after{left: auto;right:0;margin-right:8px}.tooltips a.tooltip--right:before{top:-50%;left:99%;margin-left:10px;transform:translateX(-20px)}.tooltips a.tooltip--right:after{top:50%;left:100%;margin-left:4px;margin-top:-6px;border-right-color:#000;border-left:none;transform:translateX(-20px)}.tooltips a.tooltip--bottom:before{top:99%;left:0%;margin-top:10px;transform:translateY(-20px)}.tooltips a.tooltip--bottom:after{top:100%;left:8px;margin-top:4px;border-bottom-color:#000;border-top:none;transform:translateY(-20px)}.tooltips a.tooltip--left:before{top:-50%;right:99%;margin-right:10px;transform:translateX(20px)}.tooltips a.tooltip--left:after{top:50%;right:100%;margin-top:-6px;margin-right:4px;border-left-color:#000;border-right:none;transform:translateX(20px)}:dir(rtl) a.tooltip--top::before{right:0;left:auto}:dir(rtl) a.tooltip--top::after{left: auto;right:0;margin-right:8px}:dir(rtl) a.tooltip--bottom:before{right:100%;left:auto}:dir(rtl) a.tooltip--bottom:after{right:0;left:auto;margin-right:8px}:dir(rtl) a.tooltip--bottom:before{right:0;left:auto}:dir(rtl) a.tooltip--bottom:after{right:0;left:auto;margin-right:8px}
/*!
Note: with some old Safari browser versions, the text included into the tooltips appears underlined (Webkit engine bug). If you want to correct this behavior, add this line below:
.tooltips .tooltip:hover{text-decoration:none}
*/
@media only screen and (max-width: 680px) {
/*!
Note: this script overwrites tooltip's rules for better rendering within small screens
and avoids such ugly effects seen with many other solutions available on the Internet.
*/
}
</style>
</head>
<body>
<p><a href="#nogo" title="Hi! I am a tooltip 😎" class="tooltip tooltip--bottom">Here is a link</a></p>
<script>
/*! Simple tooltips by cara-tm.com, MIT license. */
;(function(a){'use strict';if(document.querySelectorAll & Math.max(document.documentElement.clientWidth,document.body.innerWidth||0)||680<=document.body.clientWidth){document.querySelector('html').classList.add('tooltips');for(var a=document.querySelectorAll('.tooltip'),b=0;b<a.length;b++){var c=a[b].getAttribute('title');c!=null?(a[b].setAttribute('aria-label',c),a[b].setAttribute('aria-haspopup','true'),a[b].setAttribute('role','link'),a[b].removeAttribute('title')):''}}})();
</script>
</body></html>