122 lines
4.6 KiB
HTML
122 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Pure CSS Tooltips</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<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>
|
|
<p>This is one if the <a href="http://rys.io/en/123/">neat hacss</a>. Code is <a href="https://code.hackerspace.pl/rysiek/neat-hacss/">here</a>.</p>
|
|
</body>
|
|
</html> |