import { r as registerInstance, h, H as Host } from './index-b7735e0d.js';

const dvnTooltipCss = "dvn-tooltip{--tooltip-content:\"content\";--tooltip-offset:5px;--tooltip-caret-size:8px;display:inline-block;position:relative;cursor:pointer;white-space:nowrap}dvn-tooltip.top:before{left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border-color:var(--color-tooltip-background) transparent transparent transparent;bottom:calc(100% - var(--tooltip-caret-size) + var(--tooltip-offset))}dvn-tooltip.top:after{left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);text-align:center;bottom:calc(100% + var(--tooltip-offset) + var(--tooltip-caret-size))}dvn-tooltip.right:before{top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);border-color:transparent var(--color-tooltip-background) transparent transparent;left:calc(100% - var(--tooltip-caret-size) + var(--tooltip-offset))}dvn-tooltip.right:after{top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);text-align:left;left:calc(100% + var(--tooltip-offset) + var(--tooltip-caret-size))}dvn-tooltip.bottom:before{left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border-color:transparent transparent var(--color-tooltip-background) transparent;top:calc(100% - var(--tooltip-caret-size) + var(--tooltip-offset))}dvn-tooltip.bottom:after{left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);text-align:center;top:calc(100% + var(--tooltip-offset) + var(--tooltip-caret-size))}dvn-tooltip.left:before{top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);border-color:transparent transparent transparent var(--color-tooltip-background);right:calc(100% - var(--tooltip-caret-size) + var(--tooltip-offset))}dvn-tooltip.left:after{top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);text-align:right;right:calc(100% + var(--tooltip-offset) + var(--tooltip-caret-size))}dvn-tooltip:before,dvn-tooltip:after{z-index:1}dvn-tooltip:before{position:absolute;width:0;height:0;border-width:var(--tooltip-caret-size);border-style:solid;z-index:2}dvn-tooltip:after{padding:calc(2 * var(--spacing-unit));border-radius:calc(var(--corner-radius) / 2);position:absolute;min-width:var(--tooltip-width);background:var(--color-tooltip-background);color:var(--color-tooltip-text);font-size:var(--font-size-small)}dvn-tooltip:hover:before{content:\"\"}dvn-tooltip:hover:after{content:attr(data-msg)}";

let DvnTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.placement = 'top';
  }
  render() {
    const style = {};
    if (this.offset) {
      style['--tooltip-offset'] = this.offset;
    }
    if (this.width) {
      style['--tooltip-width'] = this.width;
      style['white-space'] = 'normal';
    }
    return (h(Host, { "data-msg": this.content, class: { [this.placement]: true }, style: style }, h("slot", null)));
  }
};
DvnTooltip.style = dvnTooltipCss;

export { DvnTooltip as dvn_tooltip };
