ArlingHolguin / tooltip-css

Tooltip con css

Tooltips con css y html

Hola 👋, ToolTips css

Link del Proyecto

Support:

css

/* tolptip  */
        .tool {
            position: relative;
            display: inline-block;
            /* border-bottom: 1px dotted black; */
            cursor: pointer;

        }

        .tool .tiptext {
            visibility: hidden;
            width: 150px;
            background-color: #124256;
            color: #fff;
            text-align: center;
            font-size: 11px;
            border-radius: 3px;
            padding: 6px 0;
            position: absolute;
            z-index: 1;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        .tool .tiptext::after {
            content: "";
            position: absolute;
            border-width: 5px;
            border-style: solid;
        }

        .tool:hover .tiptext {
            visibility: visible;
        }

        /* toltip top  */
        .tool.top .tiptext {
            margin-left: -60px;
            bottom: 150%;
            left: 50%;
        }

        .tool.top .tiptext::after {
            margin-left: -5px;
            top: 100%;
            left: 50%;
            border-color: #124256 transparent transparent transparent;
        }

        /* tool abajo  */
        .tool.bottom .tiptext {
            margin-left: -60px;
            top: 150%;
            left: 50%;
        }

        .tool.bottom .tiptext::after {
            margin-left: -5px;
            bottom: 100%;
            left: 50%;
            border-color: transparent transparent #124256 transparent;
        }

        /* tool izquierda */
        .tool.left .tiptext {
            top: -5px;
            right: 110%;
        }

        .tool.left .tiptext::after {
            margin-top: -5px;
            top: 50%;
            left: 100%;
            border-color: transparent transparent transparent #124256;
        }

        /* tool derecha  */
        .tool.right .tiptext {
            top: -5px;
            left: 110%;
        }

        .tool.right .tiptext::after {
            margin-top: -5px;
            top: 50%;
            right: 100%;
            border-color: transparent #124256 transparent transparent;
        }

/*hover*/
/* Bounce In */

.hvr-bounce-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.hvr-bounce-in:hover,
.hvr-bounce-in:focus,
.hvr-bounce-in:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}