CSS3 Implement ToolTip

/* START TOOLTIP STYLES */[tooltip] {position:relative;/* Opinion 1 */}/* applies to all ToolTips */[tooltip]::before,  [Tooltip]::after {text-transform:none;/* Opinion 2 */font-size:. 9em;/* Opinion 3 */line-height:1;  User-select:none;  Pointer-events:none;  Position:absolute;  Display:none; opacity:0;}  [Tooltip]::before {content: '; border:5px solid Transparent; /* Opinion 4 */z-index:1001; /* Absurdity 1 */}[tooltip]::after {content:attr (tooltip);/* magic! */* Most of the rest of this is opinion */F  Ont-family:helvetica, Sans-serif;    Text-align:center; /* Let the content set the size of the tooltips but this would also keep them from being obnoxious */min-width  : 3em;  Max-width:21em;  White-space:nowrap;  Overflow:hidden;  Text-overflow:ellipsis;  Padding:1ch 1.5ch;  Border-radius:. 3ch;  box-shadow:0 1em 2em-.5em rgba (0, 0, 0, 0.35);  Background: #333;  Color: #fff; z-index:1000; /* Absurdity 2 */}/* make the ToolTips reSpond to hover */[tooltip]:hover::before,[tooltip]:hover::after {display:block;} /* don ' t show empty tooltips */[tooltip= ']::before,[tooltip= ']::after {display:none!important;}  /* Flow:up */[tooltip]:not ([FLOW]):: before,[tooltip][flow^= "Up"]::before {bottom:100%;  border-bottom-width:0; Border-top-color: #333;} [Tooltip]:not ([Flow]):: after,[tooltip][flow^= "Up"]::after {bottom:calc (100% + 5px);} [Tooltip]:not ([Flow]):: Before,[tooltip]:not ([Flow]):: after,[tooltip][flow^= "Up"]::before,[tooltip][flow^= "up"]  :: after {left:50%; Transform:translate ( -50%,-.5em);}  /* Flow:down */[tooltip][flow^= "down"]::before {top:100%;  border-top-width:0; Border-bottom-color: #333;} [ToolTip] [flow^= "Down"]::after {top:calc (100% + 5px);} [ToolTip]  [flow^= "Down"]::before,[tooltip][flow^= "down"]::after {left:50%; Transform:translate ( -50%,. 5em);}  /* Flow:left */[tooltip][flow^= "left"]::before {top:50%;  border-right-width:0;  Border-left-color: #333;  Left:calc (0em-5px); TraNsform:translate (-.5em,-50%);} [ToolTip]  [flow^= "left"]::after {top:50%;  Right:calc (100% + 5px); Transform:translate (-.5em,-50%);}  /* Flow:right */[tooltip][flow^= "right"]::before {top:50%;  border-left-width:0;  Border-right-color: #333;  Right:calc (0em-5px); Transform:translate (. 5em,-50%);} [ToolTip]  [flow^= "right"]::after {top:50%;  Left:calc (100% + 5px); Transform:translate (. 5em,-50%);}    /* KEYFRAMES */@keyframes Tooltips-vert {to {opacity:. 9;  Transform:translate (-50%, 0);    }} @keyframes Tooltips-horz {to {opacity:. 9;  Transform:translate (0,-50%); }}/* FX all the things * * [Tooltip]:not ([Flow]): Hover::before,[tooltip]:not ([Flow]): hover::after,[tooltip][flow^= "Up "]:hover::before,[tooltip][flow^=" Up "]:hover::after,[tooltip][flow^=" Down "]:hover::before,[tooltip][flow^=" Down "]:hover::after {animation:tooltips-vert 300ms ease-out forwards;} [ToolTip] [flow^= ' left ']:hover::before,[tooltip][flow^= ' left ']:hover::after,[tooltip][flow^= ' right ']:hovEr::before,[tooltip][flow^= "Right"]:hover::after {Animation:tooltips-horz 300ms ease-out forwards;}     

　　

CSS3 Implement ToolTip