|
- .tooltip {
- display: block;
- position: absolute;
- bottom: 100%;
- width: 30em;
- padding-bottom: 0.5em;
- font-style: normal;
- text-align: left;
- z-index: 1;
- }
-
- .tooltip > span {
- display: block;
- background-color: white;
- border: 1px solid #c8ccd1;
- filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.25));
- padding: 0.5em 1em;
- }
-
- .tooltip > span::after {
- content: ' ';
- position: absolute;
- top: 100%;
- border: 0.5em solid transparent;
- border-top-color: white;
- }
-
- abbr, .tooltip-anchor-inline {
- border-width: 0;
- text-decoration: underline dotted;
- }
-
- .tooltip-anchor-inline {
- position: relative;
- }
-
- .tooltip-anchor-inline > .tooltip {
- display: none;
- }
-
- .tooltip-anchor-inline:hover > .tooltip {
- display: block;
- }
-
- .tooltip-anchor-fixed {
- position: absolute;
- }
-
- .tooltip-align-center {
- left: 50%;
- margin-left: -15em;
- }
-
- .tooltip-align-center > span::after {
- left: 50%;
- margin-left: -0.5em;
- }
-
- .tooltip-align-left {
- left: -2.5em;
- }
-
- .tooltip-align-left > span::after {
- left: 2em;
- }
-
- .tooltip-align-right {
- right: -2.5em;
- }
-
- .tooltip-align-right > span::after {
- right: 2em;
- }
|