DEV Community: David Mendoza

Agregar Tooltips a tu Sitio Web con HTML & CSS

David Mendoza — Fri, 11 Mar 2022 03:33:43 +0000

¡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

Declaración, asignación y obtención de variables en diferentes lenguajes

David Mendoza — Sun, 08 Dec 2019 01:46:03 +0000

La declaración de las variables no cambia más que en la sintaxis.
La lógica es la misma en los tres pasos.

En Pseint

Definir numerito Como Entero; //Declarando una variable

numerito = 5; //Asignando una valor a l variable

Escribir numerito; //Obteniendo el resultado

JavaScript

let numerito;       //Declarando una variable
numerito = 5;       //Asignando una valor a la variable
console.log(numerito);  //Obteniendo el resultado

let nombre;     //Declarando una variable
nombre = "David";       //Asignando una valor a la variable
console.log(nombre);    //Obteniendo el resultado

En Java

Con entero

int numerito;   //Declarando una variable
numerito = 5;   //Asignando una valor a la variable
Systen.out.println(numerito);//Obteniendo el resultado

Con String

int nombre  //Declarando una variable
nombre = "David";   //Asignando una valor a la variable
Systen.out.println(nombre); //Obteniendo el resultado

En Go

En Go no es necesario en ; al final

//Declarando una variable
var numerito int
var nombre string 
//Asignando una valor a la variable
numerito 5
nombre = David
//Obteniendo el resultado
fmt.Println(numerito)
fmt.Println(nombre)

Bloques, elementos y modificadores - BEM

David Mendoza — Sun, 08 Dec 2019 01:28:36 +0000

No le sorprenderá saber que BEM es una abreviatura de los elementos clave de la metodología: Bloque, Elemento y Modificador. Las estrictas reglas de denominación de BEM se pueden encontrar aquí.

Bloque / Block

Entidad independiente que es significativa por sí sola.
Ejemplos:

header container menu checkbok input

Elemento / Element

Una parte de un bloque que no tiene un significado independiente y está semánticamente vinculado a su bloque.
Ejemplos:

menu item list item checkbok caption header title

Modificador / Modifier

Una bandera en un bloque o elemento. Úsalos para cambiar la apariencia o el comportamiento.
Ejemplos:

disabled highlighted checked fixe size big color yellow


<button class="button">
    Normal button
</button>
<button class="button button--state-success">
    Success button
</button>
<button class="button button--state-danger">
    Danger button
</button>


.button {
    border: none;
    padding: 15px 35px;
    margin: 16px;
    border-radius: 5px;
    color: #fff;
    background-color: #008b8b;
    font-size: 1rem;
}

.button--state-success {
    background-color: #8439da;
}

.button--state-danger {
    background-color: #8439da;
}

.button--state-danger:hover {
    background-color: #745c97;
}

📝 Metodologías BEM/codepen

Menu animation

David Mendoza — Sun, 08 Dec 2019 00:46:33 +0000

Hola, son proyectos muy sencillos, aplico lo aprendido.
https://github.com/codegenial/Menu-Hamburger_Animado