JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div class="relative">
    <div class="tooltip-popup">
        Try our size guide
        <span class="tooltip-popup__arrow"></span>
    </div>
</div>

<div class="relative">
    <!-- only inline the position as this will be different for each popup -->
    <div class="tooltip-popup" style="left:30%; top: 10px">
        Now no matter what the size it can be used
        <span class="tooltip-popup__arrow"></span>
    </div>
</div>

<div class="relative">
    <div class="tooltip-popup" data-delayopen="8000" data-delayclose="2000" data-animspeed="2000">
        Use it to point out other things
        <span class="tooltip-popup__arrow tooltip-popup__arrow--up"></span>
    </div>
</div>

<div class="relative">
    <div class="tooltip-popup" data-delayopen="9000" data-delayclose="3000" data-animspeed="2000">
        Look im a big orange tooltip
        <span class="tooltip-popup__arrow tooltip-popup__arrow--up"></span>
    </div>
</div>

<div class="relative">
    <div class="tooltip-popup tooltip-popup--orange" data-delayopen="10000" data-delayclose="5000" data-animspeed="2000">
        <img src="http://cdn.memegenerator.net/instances/250x250/12868317.jpg" width="150" alt="Not sure if" />
        <span class="tooltip-popup__arrow tooltip-popup__arrow--up"></span>
    </div>
</div>

CSS

.relative {
    /* used only for this demo */
    position:relative;
    height:100px;
}

.tooltip-popup {
    background:#485664;
    color: #fff;
    display:none;
    font-family: Arial, sans-serif;
    font-size:12px;
    padding: 10px;
    position: absolute;
    text-align:center;
}

.tooltip-popup__arrow {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #485664;
    position: absolute;
    top: 100%;
    left:50%;
    margin-left:-15px;
}

/* we can easily modify this version, like so --up */
.tooltip-popup__arrow--up {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #485664;
    border-top:none;
    top: auto;
    bottom: 100%;
}

/* Colour changes */
.tooltip-popup--orange {
    background:#F68026;
}
.tooltip-popup--orange .tooltip-popup__arrow {
    border-top-color: #F68026;
}
.tooltip-popup--orange .tooltip-popup__arrow--up {
    border-bottom-color: #F68026;
}

JavaScript

// Lets get some reusable JS on the go
// Put this in SetupGlobal
$(".tooltip-popup").each(function(i,e){
    var delayOpen = $(this).data("delayopen") || 3000,
        delayClose = $(this).data("delayclose") || 8000,
        animSpeed = $(this).data("animspeed") || 500;
    
    $(this)
        .delay(delayOpen)
        .fadeIn(animSpeed)
        .delay(delayClose)
        .fadeOut(animSpeed);
});