@coderundebug/ui-web/ui-tooltip.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as o}from"./ui-tools.js";export class UiTooltip extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiTooltip.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiTooltip.uiCssStyleSheet]}}UiTooltip.uiCss=" :host{display:inline-grid;position:relative;}.message{position:absolute;pointer-events:none;background-color:var(--ui-tooltip-background, var(--ui-foreground, hsl(0 0% 18% / 1)));color:var(--ui-tooltip-foreground, var(--ui-background, hsl(0 0% 90% / 1)));border:none;border-radius:var(--ui-tooltip-radius, var(--ui-border-radius-small, 3px));outline:none;font-size:var(--ui-tooltip-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-tooltip-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;user-select:none;-webkit-user-select:none;white-space:nowrap;padding:var(--ui-tooltip-padding, 4px 6px);margin:0;z-index:2;opacity:0;transition:background-color 1.3s;}@keyframes fade-in{0%{opacity:0.25;}100%{opacity:1;}} .message{inset:unset;}:host(:not([top]):not([bottom]):not([left]):not([right])) .message, :host([top]) .message{inset-block-end:calc(100% + var(--ui-tooltip-gap, 8px));justify-self:center;align-self:end;}:host([bottom]) .message{inset-block-start:calc(100% + var(--ui-tooltip-gap, 8px));justify-self:center;align-self:start;}:host([right]) .message{inset-inline-start:calc(100% + var(--ui-tooltip-gap, 8px));justify-self:start;align-self:center;}:host([left]) .message{inset-inline-end:calc(100% + var(--ui-tooltip-gap, 8px));justify-self:end;align-self:center;}@media (hover:hover){:host(:hover) .message{display:block;}:host(:hover) .message{animation-delay:0.5s;animation-duration:0.3s;animation-name:fade-in;animation-fill-mode:forwards;}} @media not (hover:hover){.message{display:none;}} ::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){.message{border-style:var(--ui-border-style, solid);box-shadow:none;}} @media (prefers-reduced-motion){:host(:hover) .message{opacity:1;}}",UiTooltip.uiHtml='<slot></slot><div class="message"><slot name="message"></slot></div>',o.createUi(UiTooltip,"ui-tooltip",import.meta.url);