tooltips example added
commit
160c5ff7a3
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
/* +-----------------------------------------------------------------------+ *\
|
||||
|* | tooltips styling | *|
|
||||
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
||||
\* +-----------------------------------------------------------------------+ */
|
||||
/*
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
The example below assumes we want tooltips only on elements that have the
|
||||
`data-tooltip` attribute set (the text of the tooltip will be taken from it)
|
||||
|
||||
It would be trivial to change that to all elements that have `title` or `alt`
|
||||
attributes set, just use `*[title]` or `*[alt]` instead of `*[data-tooltip]`
|
||||
everywhere below, and change `content:attr(data-tooltip);` to
|
||||
`content:attr(title);` or `content:attr(alt);`, respectively.
|
||||
|
||||
It is also, of course, possible to change where the tooltips are displayed,
|
||||
just play with `top`, `left`, `*-margin` stanzas, and adjust `::after` borders
|
||||
acordingly.
|
||||
*/
|
||||
|
||||
*[data-tooltip] {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
*[data-tooltip]::before,
|
||||
*[data-tooltip]::after {
|
||||
position:absolute;
|
||||
opacity:0.8;
|
||||
visibility:hidden;
|
||||
font-size:80%;
|
||||
font-family:sans-serif;
|
||||
transition-duration:0s;
|
||||
-moz-transition-duration:0s;
|
||||
-webkit-transition-duration:0s;
|
||||
|
||||
}
|
||||
|
||||
*[data-tooltip]::before {
|
||||
content:attr(data-tooltip);
|
||||
top:-3.1em;
|
||||
left:1em;
|
||||
height:1.5em;
|
||||
min-width:10em;
|
||||
max-width:20em;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
padding:0.5em 0.7em 0.7em 0.7em;
|
||||
display:block;
|
||||
border-radius:0.3em;
|
||||
text-align:center;
|
||||
|
||||
color:white;
|
||||
background-color:rgba(6,6,6,0);
|
||||
}
|
||||
|
||||
*[data-tooltip]::after {
|
||||
content:" ";
|
||||
background:transparent;
|
||||
width:1px;
|
||||
height:1px;
|
||||
border:solid 0.4em rgba(6, 6, 6, 0);
|
||||
display:block;
|
||||
border-bottom:none;
|
||||
border-left:solid 0.3em transparent;
|
||||
border-right:solid 0.3em transparent;
|
||||
top:-0.9ex;
|
||||
left:50%;
|
||||
margin-left:-0.3em;
|
||||
}
|
||||
|
||||
*[data-tooltip]:hover::before,
|
||||
*[data-tooltip]:hover::after {
|
||||
border-top-color:rgba(6,6,6,1);
|
||||
visibility:visible;
|
||||
transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
|
||||
-moz-transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
|
||||
-webkit-transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
|
||||
}
|
||||
|
||||
*[data-tooltip]:hover::before {
|
||||
background-color:rgba(6,6,6,1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>Not tooltipped element.</div>
|
||||
<div>Not tooltipped element.</div>
|
||||
<span data-tooltip="Tooltip!">Tooltiped element 1</span>
|
||||
<div>Not tooltipped element.</div>
|
||||
<span data-tooltip="Tooltip!">Tooltiped element 2</span>
|
||||
<div>Not tooltipped element.</div>
|
||||
<span data-tooltip="Tooltip!">Tooltiped element 3</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue