Tooltips using by HTML and CSS

 Tooltips using by HTML and CSS

HTML CODE

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Tooltips Using by HTML CSS JS</h1>

    <div class="tooltip">

        Mouse Over to view tooltip

        <span class="tooltip-text">Hi I am Toop Tips</span>

    </div>

</body>

</html>

CSS CODE

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.tooltip{

    padding: 25px;

    background-color: blanchedalmond;

    margin: 25px;

    position: relative;

    width:250px;

    text-align: center;

}

.tooltip .tooltip-text{

    color: aliceblue;

    padding: 5px;

    border-radius: 5px;

    width: 100%;

    background: rgba(0, 0,0, 0.534);

    position: absolute;

    top:-17px;

    left: 0%;

    transform: scale(0);

}

.tooltip .tooltip-text::after{

    position: absolute;

    top:100%;

    left: 50%;

    content: " ";

    border: 10px solid transparent;

    border-top-color:rgba(0,0,0, 0.534);

}

.tooltip:hover .tooltip-text{

    transform: scale(1);

}