JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<h2>Nails</h2>
<table class="bspaTreatmentsTable">
    <tbody>
        <tr>
            <td width="60%">&nbsp;</td>
            <td width="15%">Duration</td>
            <td width="15%">Price (£)</td>
            <td width="10%">More Info</td>
        </tr>
        <tr>
            <td colspan="4" height="15">&nbsp;</td>
        </tr>
        <tr>
            <td><strong>Shellac Gel Nails</strong>
            </td>
            <td>30 mins</td>
            <td>35.00</td>
            <td>
                <img class="bspaMoreInfo" src="http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/aquaqm.gif" alt="" />
                <div class="bspaMoreInfoText"><strong>High Velocity Hot Stone Massage</strong>  <span>The High Velocity Hot Stone Massage, from the Jane Scrivner range, is one of our most popular treatments which incorporates warm stones with a choice of Jane Scrivner oils: peace, balance, revive, or detox. It's 50 minutes of glorious peace and total body relaxation that wiull make the perfect gift for someone special.</span>
                </div>
            </td>
        </tr>
        <tr>
            <td><strong>Shellac Gel Nails with Manicure</strong>
            </td>
            <td>60 mins</td>
            <td>49.00</td>
            <td>
                <img class="bspaMoreInfo" src="http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/aquaqm.gif" alt="" />
                <div class="bspaMoreInfoText"><strong>High Velocity Hot Stone Massage</strong>  <span>The High Velocity Hot Stone Massage, from the Jane Scrivner range, is one of our most popular treatments which incorporates warm stones with a choice of Jane Scrivner oils: peace, balance, revive, or detox. It's 50 minutes of glorious peace and total body relaxation that wiull make the perfect gift for someone special.</span>
                </div>
            </td>
        </tr>
        <tr>
            <td><strong>Shellac Soak Removal</strong>
       ...

CSS

.bspaTreatmentsTable {
    width: 100%;
    overflow: visible;
    z-index:80;
}
.bspaTreatmentsTable tr {
    overflow: visible;
}
.bspaTreatmentsTable td {
    overflow: visible;
    position: relative;
}
.bspaMoreInfoText {
    display:none;
    position:absolute;
    left:-427px;
    top:3px;
    background:#fff url('http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/textborder.gif') top center no-repeat;
    border: 4px solid #d9d9d9;
    width:401px;
    z-index:100;
}
.bspaMoreInfoText strong {
    display:block;
    padding:13px 12px 20px 12px;
}
.bspaMoreInfoText span {
    display:block;
    padding:0 12px 10px 12px;
}

JavaScript

jQuery.fn.moreInfo = function () {
    return this.each(function () {

        var jQuerytext = jQuery(this).next();

        jQuery(this).mouseenter(function () {
            clearTimeout(jQuerytext.data('timeoutId'));
            jQuerytext.show(200);
        })
            .mouseleave(function () {
            jQuerytext.data('timeoutId', setTimeout(function () {
                jQuerytext.hide(200);
            }, 650));
        });

        jQuerytext.mouseenter(function () {
            clearTimeout(jQuerytext.data('timeoutId'));
        }).mouseleave(function () {
            jQuerytext.data('timeoutId', setTimeout(function () {
                jQuerytext.hide(200);
            }, 650));
        });
    });
};

jQuery(document).ready(function () {
    jQuery(".bspaMoreInfo").moreInfo();
});