JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<div id="outer">
    <ul class="tooltip">
        
        <li><h4>Lorem Ipsum</h4>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            <div class="child">
            <img src="http://1.bp.blogspot.com/-t07WIkCvVRI/Tys_GX4WG_I/AAAAAAAACD0/7dxE_VV1GwQ/s1600/friendship.jpg" alt="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </div>
        </li>
        
        <li><h4>Lorem Ipsum</h4>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            <div class="child" style="height:500px;">
            <img src="http://1.bp.blogspot.com/-t07WIkCvVRI/Tys_GX4WG_I/AAAAAAAACD0/7dxE_VV1GwQ/s1600/friendship.jpg" alt="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </div>
        </li>
        
        <li><h4>Lorem Ipsum</h4>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            <div class="child" style="height:300px;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </div>
        </li>
        
        <li><h4>Lorem Ipsum</h4>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...

CSS

body {
    background-color:#fff3df;
    color:#333;
    font:normal 11px Verdana,Arial,Sans-Serif;
    height:2000px;
}

#outer {
    position:relative;
    margin:30px 5%;
    background-color:#B2BBC9;
    border:1px solid #647181;
    padding:10px;
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.2);
    box-shadow:0px 0px 2px rgba(0,0,0,0.2);
}

ul.tooltip {
    margin:0px 0px;
    padding:0px 0px;
    color:#666;
}

ul.tooltip li {
    background-color:white;
    width:45%;
    padding:40px 15px 15px;
    margin:0px 0px 2px;
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    position:relative;
    list-style:none;
    cursor:pointer;
}

ul.tooltip li .child {
    width:98%;
    position:absolute;
    left:100%;
    top:0px;
    z-index:10;
    background-color:#DEE3F3;
    border:1px solid #B6BCCC;
    box-shadow:0px 1px 4px rgba(0,0,0,0.4);
    padding:10px 15px;
    display:none;
}

ul.tooltip li .child:before {
    content:"";
    width:10px;
    height:10px;
    background-color:#DEE3F3;
    border-left:1px solid #B6BCCC;
    border-bottom:1px solid #B6BCCC;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    position:absolute;
    top:10px;
    left:-5px;
}

ul.tooltip li h4 {
    margin:0px 0px 5px;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    background-color:#eee;
    padding:10px 3%;
    position:absolute;
    top:0px;
    left:0px;
    width:94%;
}

ul.tooltip li .child img {
    display:block;
    max-width:100%;
    height:auto !important;
    margin:0px auto 10px;
}

ul.tooltip li:hover .child {
    display:block;   
}

JavaScript

// (Before) :: How to Push Parent Element to the Height of Absolute Positioned <div>