component.css

[tooltip] { margin: 20px; position: relative; }
[tooltip]::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-width: 5px 7px 0 7px; border-style: solid; border-color: rgba(0,0,0,0.9) transparent transparent transparent; opacity: 0; z-index: 1000; }
[tooltip]::after { content: attr(tooltip); position: absolute; left: 50%; top: -8px; transform: translateX(-50%) translateY(-100%); background: rgba(0,0,0,0.9); text-align: center; color: #fff; padding:4px 2px; font-size: 12px; min-width: 80px; border-radius: 3px; pointer-events: none; opacity: 0; z-index: 1000; }
[tooltip]:hover::after, [tooltip]:hover::before { opacity:1; transition-delay: 0.1s; }
[tooltip-position='left']::before { left: 0%; top: 50%; margin-left: -12px; transform: translatey(-50%) rotate(-90deg); }
[tooltip-position='top']::before { left: 50%; }
[tooltip-position='bottom']::before { top: 100%; margin-top: 8px; transform: translateX(-50%) translatey(-100%) rotate(-180deg); }
[tooltip-position='right']::before { left: 100%; top: 50%; margin-left: 1px; transform: translatey(-50%) rotate(90deg); }
[tooltip-position='left']::after { left: 0%; top: 50%; margin-left: -7px; transform: translateX(-100%) translateY(-50%); }
[tooltip-position='top']::after { left: 50%; }
[tooltip-position='bottom']::after { top: 100%; margin-top: 7px; transform: translateX(-50%) translateY(0%); }
[tooltip-position='right']::after { left: 100%; top: 50%; margin-left: 10px; transform: translateX(0%) translateY(-50%); }
.ui-dark [tooltip]::after { background: rgba(255,255,255,0.9); color: #000; }
.ui-dark [tooltip]::before { border-color: rgba(255,255,255,0.9) transparent transparent transparent; }