ASP.NET Core tooltip aside the button

Question

I am doing an ASP.NET Core MVC application.

I have an Image button that has a tooltip like this

<div class="col-md-1 tooltips" style="margin-left:0px; padding-left:0px">
    <span class="t-question-circle-SurfieGreen"></span>
    <span class="tooltiptext">
        <pre class="pre-font-family" style="white-space: pre-line;">Consult with your Implementation Manager / Service Delivery Manager
                prior to selecting SOMETHING.... 
</pre>
    </span>
</div>

This is the css I have

.tooltips {
    width: fit-content
}

    .tooltips .tooltiptext {
        visibility: hidden;
        width: 33rem;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        font-size: 14px;
        position: absolute;
        z-index: 1;
        top: 30%;
        left: 60%;
        margin-left: -60px;
    }

this css shows the tooltip 30% from the top... It works..

The problem I have is that I have this tooltip in different places in the page. And the page has ScrollBar.

For that tooltip I have at the end of the page. The tooltip is not seen.

I would like to show the tooltip aside the image. How I have to define my css? Or do I have to use jQuery?

Thanks

Answer 1

My workaround is calculating the position of the image when hover the image, then dynamically set the css top value of the tooltip.

Here's my code:

.tooltips {
    width: fit-content;
    position: relative;
    display: inline-block;
}

.tooltips .tooltiptext {
    /*visibility: hidden;*/
    width: 33rem;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 14px;
    position: absolute;
    z-index: 1;
}

<div>
    <div id="img1" style="height:150px;width:150px">hello this is an image</div>
</div>

$(function(){
            $('#img1').hover(function(){
                console.info($('#img1').position());
                var t = $('#img1').position().top;
                t = t-150;
                console.log(t);
                $('.tooltips').attr('style','top:'+t+'px');
                //$('.tooltiptext').css('visibility','visible');
                
            },function(){
                    $('.tooltips').attr('style','top:0px');
                //$('.tooltiptext').css('visibility','hidden');
            });
        });