How Do I create a simple pop-up on hover?

Donald Symmons 2,806 Reputation points
2022-12-07T10:10:50.67+00:00

I have this pop up , but it's only at the click of a control, that it pops up.
And I want to create the same simple popup, but this time, on cursor hover. Please how do I do that?

Here is how the simple popup looks like

268166-popup.png

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,219 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
854 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 24,461 Reputation points Microsoft Vendor
    2022-12-08T05:25:57.087+00:00

    Hi @Donald Symmons ,
    You didn't provide the source code, so it's not clear what method you're using specifically. I wrote two examples you can refer to.
    CSS Tooltip

    <style>  
            .tooltip {  
                position: relative;  
                display: inline-block;  
                border-bottom: 1px dotted black;  
            }  
      
                .tooltip .tooltiptext {  
                    visibility: hidden;  
                    width: 120px;  
                    backgro und-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;  
                }  
    </style>  
    

    <div>  
                <h2>Top Tooltip</h2>  
    <p>Move the mouse over the text below:</p>  
      
    <div class="tooltip">Hover over me  
      <span class="tooltiptext">Tooltip text</span>  
    </div>  
            </div>  
    

    268369-image.png
    Bootstrap JS Tooltip
    268454-image.png

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful