kit/assets/tooltip/tooltipJq.css

:root {
    --kit-tooltip-font-size: 0.8em;
    --kit-tooltip-color: #ffffff;
    --kit-tooltip-content-color: #212121fa;
    --kit-tooltip-border-color: #212121fa;
    --kit-tooltip-border-width: 0px;
    --kit-tooltip-arrow-width: 0.8em;
    --math-sqrt-2: 1.414213562373095;
}
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: var(--kit-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0;
}

.tooltip.show {
    opacity: 0.9;
}

.tooltip .arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
    overflow: hidden;
}

.tooltip .arrow::before {
    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
    width: var(--kit-tooltip-arrow-width);
    height: var(--kit-tooltip-arrow-width);
    background-color: var(--kit-tooltip-content-color);
    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
}

.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}

.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
    bottom: 0;
    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    /* left: 50% !important; */
    /* transform: translate(-50%, 0); */
}

.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
    bottom: 0;
    left: 50%;
    transform: rotate(
            225deg
    ) translate(0, 100%);
    transform-origin: 0 100%;
    border-left-color: var(
            --kit-tooltip-border-color);
    border-top-color: var(
            --kit-tooltip-border-color);
    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}

.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}

.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
    left: 0;
    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    top: 50% !important;
    transform: translate(0px, -50%);
}

.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
    left: 0px;
    top: 50%;
    transform: rotate(
            225deg
    ) translate(25%, -50%);
    transform-origin: 75% 0;
    border-right-color: var(
            --kit-tooltip-border-color);
    border-top-color: var(
            --kit-tooltip-border-color);
}

.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}

.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
    top: 0;
    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    /*left: 50% !important;*/
    /*transform: translate(-50%, 0);*/
}

.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
    top: 0;
    left: 50%;
    transform: rotate(
            45deg
    ) translate(0, 0);
    transform-origin: 0 0;
    border-left-color: var(
            --kit-tooltip-border-color);
    border-top-color: var(
            --kit-tooltip-border-color);
    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}

::before {}

.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}

.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
    right: 0;
    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
    top: 50% !important;
    transform: translate(0px, -50%);
}

.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
    right: 0;
    top: 50%;
    transform: rotate(
            45deg
    ) translate(-25%, -50%);
    transform-origin: 25% 0;
    border-right-color: var(
            --kit-tooltip-border-color);
    border-top-color: var(
            --kit-tooltip-border-color);
}

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: var(--kit-tooltip-color);
    text-align: center;
    background-color: var(--kit-tooltip-content-color);
    border-radius: 0.25rem;
    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
}