Building a css tooltip

on   with No comments

 Building a css tooltip takes two parts

1. Building the tooltip container

2. Building the tooltip arrow


for starters like me, the tooltip arrow was the hardest part. i didnt know how to make a triangle in css. The trick is to create a element with zero height, zero width , then create a border of lets say 10 pixels with color set to transparent. The element wont be visible, but it will create a square with four triangles. Then you set a solid color to a single border. This will make it appear like a triangle.


    .tooltip:before {

        right: 100%;
        position: absolute;
        border: 10px solid transparent;
        border-right-color: rgba(0,0,0,0.8);
        content: "";
    }
 
 

You can find the code below to build the tooltip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltip</title>
</head>
<body>

<div class="container">

    <button id="target">My button</button>
    <div class="tooltip">I am a tooltip</div>
</div>

</body>
<style>

    .container {
        display: flex;
        height: 100vh;
        width: 100vw;
        align-items: center;
        justify-content: center;
    }


    #target:hover + .tooltip {
        display: block;
    }

    #target {
        height: 100px;
        width: 100px;
    }

    .tooltip {
        margin: 10px;
        text-align: center;
        display: none;
        padding: 10px;
        background-color: rgba(0,0,0,0.8);
        color: white;
        position: relative;

    }
    .tooltip:before {

        right: 100%;
        position: absolute;
        border: 10px solid transparent;
        border-right-color: rgba(0,0,0,0.8);
        content: "";
    }
</style>
</html>

Share:

0 comments:

Post a Comment