Color of the custom triangle in the tooltip does not change

Question

In the code below, I'm showing a triangle with a custom-made tooltip in AngularJS. For now, everything is working fine, but the main concern is that I want the triangle to have a white color from the inside and the same border color as the hover div, so they look attached. I've tried multiple methods, but none of them worked. Any leads would be highly appreciated.

Result I have:

Result I want:

HTML

   <td style="padding: 1.25vw 0 1.25vw 1.5vw;">
                <div ng-if="proj.locationTxt.length > 36">
                    <div class="arrow_box">
                        <div>{{ proj.locationTxt | limitTo: 66 }}...</div>
                        <span class="arrow_boxtext"> {{ proj.locationTxt }}</span>
                    </div>
                    <span ng-if="proj.locationTxt.length <= 36">
                            {{ proj.locationTxt }}
                    </span>
                </div>
            </td>

CSS

.arrow_box {
    position: relative;
    display: inline-block;
}

.arrow_box .arrow_boxtext {
    visibility: hidden;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 17%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    width: 274px;
    height: auto; 
    white-space: normal;
    color: black !important;
    font-size: 13px;
    padding: 8px 12px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 1px 1px 6px #00000029;
    border: 1px solid #00000030;
    white-space: pre-wrap;
    word-break: break-word;
}

.arrow_box .arrow_boxtext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.arrow_box:hover {
    color: #0288BA;;
}

.arrow_box:hover .arrow_boxtext {
    visibility: visible;
    opacity: 1;
}

score 0 · Answer 1 · answered Jun 28 '23 at 05:15

You can add an additional pseudo-element :before with a black top border, making it appear bigger outside the :after pseudo-element. Here's an example:

.arrow_box .arrow_boxtext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-top-color: white;
}

.arrow_box .arrow_boxtext::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #00000030;
}

Color of the custom triangle in the tooltip does not change

1 Answers1