.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }



.has-tooltip {
    position: relative;
}

    .has-tooltip .custom-tooltip-message {
        visibility: hidden;
        position: absolute;
        color: black;
        background-color: rgba(228, 228, 228, 0.75);
        padding: 0 10px;
        z-index: 9999;
        font-size: 0.85rem;
        border-radius: 5px;
        width: max-content;
    }

        .has-tooltip .custom-tooltip-message::after {
            content: "";
            position: absolute;
            border-width: 5px;
            border-style: solid;
        }

        .has-tooltip .custom-tooltip-message.top, .has-tooltip .custom-tooltip-message.bottom {
            left: 50%;
            transform: translateX(-50%);
        }

            .has-tooltip .custom-tooltip-message.top::after, .has-tooltip .custom-tooltip-message.bottom::after {
                left: 50%;
                margin-left: -5px;
            }

        .has-tooltip .custom-tooltip-message.left, .has-tooltip .custom-tooltip-message.right {
            top: 50%;
            transform: translateY(-50%);
        }

            .has-tooltip .custom-tooltip-message.left::after, .has-tooltip .custom-tooltip-message.right::after {
                top: 50%;
                margin-top: -5px;
            }

        .has-tooltip .custom-tooltip-message.left {
            right: 100%;
            margin-right: 5px;
        }

            .has-tooltip .custom-tooltip-message.left::after {
                left: 100%;
                border-color: transparent transparent transparent rgba(228, 228, 228, 0.75);
            }

        .has-tooltip .custom-tooltip-message.right {
            left: 100%;
            margin-left: 5px;
        }

            .has-tooltip .custom-tooltip-message.right::after {
                right: 100%;
                border-color: transparent rgba(228, 228, 228, 0.75) transparent transparent;
            }

        .has-tooltip .custom-tooltip-message.top {
            bottom: 100%;
            margin-bottom: 5px;
        }

            .has-tooltip .custom-tooltip-message.top::after {
                top: 100%;
                border-color: rgba(228, 228, 228, 0.75) transparent transparent transparent;
            }

        .has-tooltip .custom-tooltip-message.bottom {
            top: 100%;
            margin-top: 5px;
        }

            .has-tooltip .custom-tooltip-message.bottom::after {
                bottom: 100%;
                border-color: transparent transparent rgba(228, 228, 228, 0.75) transparent;
            }

    .has-tooltip:hover .custom-tooltip-message {
        visibility: visible;
    }