Agregar Tooltips a tu Sitio Web con HTML & CSS

¡Hola gente bonita!👋
Aprende como crear tooltips básicos para tu sitio web utilizando solamente HTML y CSS.

---

HTML

<div class="container">
        <h1 class="title">Tooltip</h1>

        <div class="tooltips">
            <p>Muchos ignoran el hecho de que la web nació en Europa, y más concretamente en el
                <a class="tooltip" href="https://home.cern/" target="_blank">CERN.
                    <i class="fas fa-info-circle"></i>
                    <span class="tooltip__box"><b>Agregar un link:</b> https://home.cern/</span>
                </a>Allá por el año 1989,
                <b class="tooltip">Tim Berners-Lee,
                    <i class="fas fa-info-circle"></i>
                    <span class="tooltip__box tooltip__box-v">
                        <b>Agregar una descripción importante:</b>
                        Creador de la web y del lenguaje HTML
                    </span>
                </b>propuso un proyecto para gestinar la información.
            </p>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables CSS */
:root {
    --color-light: #EDEDED;
    --color-blue : #9FB2FF;
    --tooltip    : #F6DA63;
    --color-dark : #2B314F;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: var(--color-light);
}

.container {
    width: 50%;
    height: 400px;
}


.title {    
    font-family: 'Oswald', sans-serif;
    text-align: center;
    padding: 30px 0;
    font-size: 60px;
}

.tooltips {
    background-color: var(--color-dark);
    color: var(--color-blue);
    font-family: sans-serif;
    border-radius: 10px;
    padding: 40px;
    font-size: 16px;
    line-height: 32px;
    box-shadow: 5px 5px 50px rgba(0,0,0,.10);
}

.tooltip {
    font-weight: normal;
    color: var(--tooltip);
    text-decoration: none;
    text-align: center;
    position: relative;
}

.tooltip:hover {
    text-decoration: underline;
}

.tooltip:hover .tooltip__box {
    display: inline-block;
}

.tooltip__box {
    display: none;
    position: absolute;
    background-color: var(--tooltip);
    line-height: 20px;
    z-index: 500;
    color: var(--color-dark);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    left: -80px;
    right: 0;
    bottom: 30px;
    width: 200px;
}

.tooltip__box-v {
    left: -3px;
}

.tooltip__box:after {
    content: '';
    display: block;
    border-top: 8px solid var(--tooltip);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    bottom: -7px;
    left: calc(71% - 7px);
}

Ver en Codepen