:host .tef-tooltip { position: relative; display: inline-block; } :host .tef-tooltip[tooltip]:before, :host .tef-tooltip .tef-tooltip-content ::content tooltip { display: none; position: absolute; content: attr(tooltip); background-color: #31323b; color: white; font-size: 12px; line-height: 14px; padding: 15px 23px; border-radius: {{g.radius}}; max-width: 300px; text-align: left; z-index: 50; white-space: pre; word-break: break-word; } :host .tef-tooltip .tef-tooltip-content ::content tooltip { content: ""; padding: 0 23px; } :host .tef-tooltip .tef-tooltip-content ::content tooltip > * { margin: -10px 0; } :host .tef-tooltip:after { display: none; position: absolute; content: ""; border: 8px solid transparent; z-index: 50; } :host .tef-tooltip.right[tooltip]:before, :host .tef-tooltip.right .tef-tooltip-content ::content tooltip { top: 50%; left: 100%; margin: -16px 0 0 8px; } :host .tef-tooltip.right[tooltip].reverse:before, :host .tef-tooltip.right .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 50%; margin: 0 0 -16px 8px; } :host .tef-tooltip.right:after { border-right: 8px solid #31323b; top: 50%; left: 100%; margin: -8px 0 0 -8px; } :host .tef-tooltip.right.start[tooltip]:before, :host .tef-tooltip.right.start .tef-tooltip-content ::content tooltip { top: 16px; } :host .tef-tooltip.right.start[tooltip].reverse:before, :host .tef-tooltip.right.start .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 100%; margin: 0 0 -32px 8px; } :host .tef-tooltip.right.start:after { top: 16px; } :host .tef-tooltip.right.end[tooltip]:before, :host .tef-tooltip.right.end .tef-tooltip-content ::content tooltip { top: 100%; margin: -32px 0 0 8px; } :host .tef-tooltip.right.end[tooltip].reverse:before, :host .tef-tooltip.right.end .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 0; margin: 0 0 0 8px; } :host .tef-tooltip.right.end:after { top: auto; bottom: 8px; } :host .tef-tooltip.left[tooltip]:before, :host .tef-tooltip.left .tef-tooltip-content ::content tooltip { top: 50%; right: 100%; margin: -16px 8px 0 0; } :host .tef-tooltip.left[tooltip].reverse:before, :host .tef-tooltip.left .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 50%; margin: 0 8px -16px 0; } :host .tef-tooltip.left:after { border-left: 8px solid #31323b; top: 50%; right: 100%; margin: -8px -8px 0 0; } :host .tef-tooltip.left.start[tooltip]:before, :host .tef-tooltip.left.start .tef-tooltip-content ::content tooltip { top: 16px; } :host .tef-tooltip.left.start[tooltip].reverse:before, :host .tef-tooltip.left.start .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 100%; margin: 0 8px -32px 0; } :host .tef-tooltip.left.start:after { top: 16px; } :host .tef-tooltip.left.end[tooltip]:before, :host .tef-tooltip.left.end .tef-tooltip-content ::content tooltip { top: 100%; margin: -32px 8px 0 0; } :host .tef-tooltip.left.end[tooltip].reverse:before, :host .tef-tooltip.left.end .reverse .tef-tooltip-content ::content tooltip { top: auto; bottom: 0; } :host .tef-tooltip.left.end:after { top: auto; bottom: 8px; } :host .tef-tooltip.top[tooltip]:before, :host .tef-tooltip.top .tef-tooltip-content ::content tooltip { bottom: 100%; left: 50%; margin: 0 0 8px -16px; } :host .tef-tooltip.top[tooltip].reverse:before, :host .tef-tooltip.top .reverse .tef-tooltip-content ::content tooltip { right: 50%; left: auto; margin: 0 -16px 8px 0; } :host .tef-tooltip.top:after { border-top: 8px solid #31323b; left: 50%; bottom: 100%; margin: 0 0 -8px -8px; } :host .tef-tooltip.top.start[tooltip]:before, :host .tef-tooltip.top.start .tef-tooltip-content ::content tooltip { left: 16px; } :host .tef-tooltip.top.start[tooltip].reverse:before, :host .tef-tooltip.top.start .reverse .tef-tooltip-content ::content tooltip { left: auto; right: 100%; margin: 0 -32px 8px 0; } :host .tef-tooltip.top.start:after { left: 16px; } :host .tef-tooltip.top.end[tooltip]:before, :host .tef-tooltip.top.end .tef-tooltip-content ::content tooltip { left: 100%; margin: 0 0 8px -32px; } :host .tef-tooltip.top.end[tooltip].reverse:before, :host .tef-tooltip.top.end .reverse .tef-tooltip-content ::content tooltip { left: auto; right: 0; } :host .tef-tooltip.top.end:after { left: auto; right: 8px; } :host .tef-tooltip.bottom[tooltip]:before, :host .tef-tooltip.bottom .tef-tooltip-content ::content tooltip { top: 100%; left: 50%; margin: 8px 0 0 -16px; } :host .tef-tooltip.bottom[tooltip].reverse:before, :host .tef-tooltip.bottom .reverse .tef-tooltip-content ::content tooltip { right: 50%; left: auto; margin: 8px -16px 0 0; } :host .tef-tooltip.bottom:after { border-bottom: 8px solid #31323b; left: 50%; top: 100%; margin: -8px 0 0 -8px; } :host .tef-tooltip.bottom.start[tooltip]:before, :host .tef-tooltip.bottom.start .tef-tooltip-content ::content tooltip { left: 16px; } :host .tef-tooltip.bottom.start[tooltip].reverse:before, :host .tef-tooltip.bottom.start .reverse .tef-tooltip-content ::content tooltip { left: auto; right: 100%; margin: 8px -32px 0 0; } :host .tef-tooltip.bottom.start:after { left: 16px; } :host .tef-tooltip.bottom.end[tooltip]:before, :host .tef-tooltip.bottom.end .tef-tooltip-content ::content tooltip { left: 100%; margin: 8px 0 0 -32px; } :host .tef-tooltip.bottom.end[tooltip].reverse:before, :host .tef-tooltip.bottom.end .reverse .tef-tooltip-content ::content tooltip { left: auto; right: 0; } :host .tef-tooltip.bottom.end:after { left: auto; right: 8px; } :host .tef-tooltip:hover[tooltip]:before, :host .tef-tooltip:focus[tooltip]:before, :host .tef-tooltip.active[tooltip]:before, :host .tef-tooltip:hover:after, :host .tef-tooltip:focus:after, :host .tef-tooltip.active:after, :host .tef-tooltip:hover .tef-tooltip-content ::content tooltip, :host .tef-tooltip:focus .tef-tooltip-content ::content tooltip, :host .tef-tooltip.active .tef-tooltip-content ::content tooltip { display: block; } :host .tef-tooltip pre { margin: 0; padding: 0; }