How Can I Create Tooltips In Cascading Style Sheets

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

when we create tooltip it will often used to specify extra information about something when the user moves the mouse pointer over an element.So today we discuss how to do it.

How Can I Create Tooltips In Cascading Style Sheets

Create a tooltip that appears when the user moves the mouse over an element:

.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 29px;
    position: absolute;
    z-index: 1;
    margin-top: 25px;
    margin-left: -62px;
}

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

Complete Code For Creating Tooltips In Cascading Style Sheets
<!DOCTYPE html>
<html>
<head>
    <title>How Can I Create Tooltips In Cascading Style Sheets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>

    body{
        background: #cc99ff;
        text-align: center;
    }
    .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 29px;
        position: absolute;
        z-index: 1;
        margin-top: 25px;
        margin-left: -62px;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Create Tooltips In Cascading Style Sheets</h1>
    </div>
    <br>
    <div class="col-md-12">
        <p>Move the mouse over the text below:</p>
        <div class="tooltip">Hover over me
            <span class="tooltiptext">Tooltip text</span>
        </div>
    </div>
</div>
</body>
</html>

Related Post