How to use HTML and CSS to create prompt tools.

The tooltip is triggered when the mouse moves over the specified element

Basic Tooltip

The prompt box displays when the mouse moves over the specified element:

    <style>
    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* The hover element displays dotted lines */
    }
     
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
     
        / * location * /
        position: absolute;
        z-index: 1;
    }
     
    /* A prompt box is displayed */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    </style>
     
    <div class="tooltip">Mouse over here<span class="tooltiptext">Tooltip text</span>
    </div>
Copy the code

Instance analysis

HTML) uses the container element (like <div>) and adds “to”