I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!

Scenario 1:

Scenario 2:

HTML:

<th *ngFor="let field of columnFields">
    <a class="column-label">
        <div class="custom-tooltip">
            <div class="tooltip__initiator">{{field.name}}</div>
            <div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
        </div>
    </a>
</th>

STYLE:

        .custom-tooltip {
            position: relative;
        }
        .tooltip__initiator {
            cursor: pointer;
            z-index: 5;
        }
        .tooltip__item {
            font-family: "ABeeZee";
            font-size: 13px;
            line-height: 18px;
            position: absolute;
            position: absolute;
            min-width: 132px;
            max-width: 320px;
            text-align: center;
            padding: 12px;
            visibility: hidden;
            opacity: 0;
            color: white;
            border: 1px solid #cecece;
            border-radius: 3px;
            font-weight: 500;
            z-index: 6;
            background: blue;
            border: 1px solid blue;
            border-radius: 8px;
            white-space: break-spaces;
            inline-size: max-content;
            top: calc(70% + 1em);
        }
        .tooltip__item:after {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }
        .custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
            left: 50%;
            visibility: visible;
            opacity: 1;
        }
        .custom-tooltip .tooltip__item:after {
            left: 50%;
            top: -0.5em;
            border-width: 0 1em 0.6em 1em;
            border-color: transparent transparent blue transparent;
            border-radius: 8px;
        }