Tooltip GPF

by cintia_rodrigues

HTML

<span class="tooltip">
        <span class="tooltip-content tooltip-right-content">
            <span class="tooltip-text">
                Para participar en la compra si estas registrado en <a style="color:#efa640" href="www.ocu.org">www.ocu.org</a> puedes utilizar tu cuenta o bien cumplimentar el formulario de registro.
            </span>
        </span>
    </span>
    <div class="help-icon col-1 jq_tooltip" style="margin-top: 15px;">?</div>

CSS

/*
#############################
TOOLTIP
#############################
*/
.tooltip {
    display: block;
    position: relative;
    z-index: -1;
}

    .tooltip:after {
        content: '';
        display: block;
        clear: both;
    }

.tooltip-content {
    position: absolute;
    left: -20px;
    margin: 0 0 20px;
    bottom: 0;
    text-align: left;
    font-size: 0.765em;
    line-height: 1.4;
    box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
    background: #2a3035;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    cursor: default;
    pointer-events: none;
    width: 350px;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale3d(0.7,0.3,1);
    transform: scale3d(0.7,0.3,1);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

.tooltip.hover {
    z-index: 10;
}

    .tooltip.hover .tooltip-content {
        pointer-events: auto;
        opacity: 1;
        -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
        transform: translate3d(0,0,0) rotate3d(0,0,0,0);
    }

.tooltip-text {
    color: white;
    padding: 10px;
    display: inline-block;
}

.tooltip-content:after, .tooltip-content:before {
    content: '';
    display: table;
}

.tooltip-content::after {
    content: '';
    top: 100%;
    left: 25px;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #2a3035;
    border-top-color: rgba(0,0,0,0.7);
    border-width: 10px;
    margin-left: -10px;
}

JavaScript

function setTooltips() {
        $(".jq_tooltip").each(function () {
            var parentObj = $(this).prevAll(".tooltip");
            $(this).hover(
                function () {
                    parentObj.addClass("hover");
                }, function () {
                    parentObj.removeClass("hover");
                }
            );
        });
    }