:host {
    display: inline-block;
}

.tooltip-parent {
    display: inline-flex; /* proper alignment in various scenarios */
}

:host([trigger="click"]) .tooltip-parent {
    cursor: pointer;
}

.popup {
    max-width: 330px;
    position: absolute;
    background: white;
    padding: 8px 15px;
    border-radius: 4px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
    z-index: 10;

    top: 0;
    left: 0;
}

.arrow {
    position: absolute;
    background: white;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

[data-placement^=top] .arrow {
    bottom: -5px;
}
[data-placement^=bottom] .arrow {
    top: -5px;
}
[data-placement^=left] .arrow {
    right: -5px;
}
[data-placement^=right] .arrow {
    left: -5px;
}

/* transparent bridge over the offset() gap so the pointer can travel into the popup */
.popup::before {
    content: '';
    position: absolute;
}
.popup[data-placement^=top]::before    { bottom: -10px; left: 0; right: 0; height: 10px; }
.popup[data-placement^=bottom]::before { top: -10px;    left: 0; right: 0; height: 10px; }
.popup[data-placement^=left]::before   { right: -10px;  top: 0; bottom: 0; width: 10px; }
.popup[data-placement^=right]::before  { left: -10px;   top: 0; bottom: 0; width: 10px; }