ESS - Tooltip

by kapantzak

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,greek-ext&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<table id="master-table" border="1">
    <tbody>
        <tr>
            <th><span>Κωδικός</span></th>
            <th><span>Όνομα</span></th>
        </tr>
        <tr>
            <td>
                <span>001</span>
            </td>
            <td class="tooltip-container">
                <span>Βαφειάδης</span>
                <div class="tooltip-wrapper">
                    <div class="tooltip-arrow arrow-top">
                        <i class="icon-caret-up"></i>
                    </div>
                    <h1 class="tooltip-header">Βαφειάδης</h1>
                    <ul class="tooltip-ul">
                        <li>Ωρομίσθιος</li>
                        <li>Ημ. εργασίας / εβδομάδα: 5</li>
                        <li>Ώρες εργασίας / ημέρα: 8</li>
                        <li>Απασχόληση: Πλήρης</li>
                    </ul>
                    <div class="tooltip-arrow arrow-bottom">
                        <i class="icon-caret-down"></i>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td><span>002</span></td>
            <td class="tooltip-container">
                <span>Κοσμίδης</span>
                <div class="tooltip-wrapper">
                    <div class="tooltip-arrow arrow-top">
                        <i class="icon-caret-up"></i>
                    </div>
                    <h1 class="tooltip-header">Κοσμίδης</h1>
               ...

CSS

#master-table {
    margin: 150px 0 0 250px;
}

td {
    padding: 5px;
}

div.tooltip-wrapper {
    position: fixed;
    width: 200px;
    padding: 0;
    background-color: #ecf0f1;   
    display: none;
}

div.tooltip-wrapper.hidden-tooltip {
    /*display: none;*/
}

div.tooltip-arrow {
    width: 100%;
    height: 20px;
    float: left;
    position: relative;    
    background-color: none;    
    font-size: 48px;
}

.arrow-top {
    margin-top: -20px;
    color: #25a0da;
}

.arrow-bottom {
    margin-bottom: -10px;
    color: #ecf0f1;
    display: none;
}

div.tooltip-arrow > i {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -15px;    
}

div.tooltip-arrow > i.topLeft {
    left: 0;
}

div.tooltip-arrow > i.topRight {
    right: 0;
}


h1.tooltip-header {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    background-color: #25a0da;
    color: #fff;
    margin: 0;
    padding: 5px;
}

ul.tooltip-ul {
    padding: 10px 0 10px 10px;
}

ul.tooltip-ul > li {
    list-style: none;
    color: #25a0da;
}

td.tooltip-container:hover {
    /*cursor: none;*/
}

td.tooltip-container:hover > .tooltip-wrapper {
    /*display: block;*/
}

JavaScript

$(document).on("mousemove", function(event) {
    var posX = event.pageX;
    var posY = event.pageY;
    var winH = $(window).height();
    var winW = $(window).width();
    var tooltip = $('div.tooltip-wrapper');        
    var tooltipH = tooltip.height();
    var tooltipW = tooltip.width();
    var distFromBottom = parseInt(winH) - parseInt(posY);
    var distFromRight = parseInt(winW) - parseInt(posX);    
    var arrow = $('div.tooltip-arrow > i');
    var arrowTop = $('.arrow-top');
    var arrowBot = $('.arrow-bottom');
    
    if(distFromBottom > tooltipH) {
        tooltip.css({'top':posY + 10 + 'px'});
        arrowBot.hide();
        arrowTop.show();
    } else {
        tooltip.css({'top':posY - 10 - parseInt(tooltipH) + 'px'});
        arrowBot.show();
        arrowTop.hide();
    }
    if (distFromRight > tooltipW) {
        tooltip.css({'left':posX + 5 + 'px'});
        arrow.removeClass('topRight').addClass('topLeft');
    } else {
        tooltip.css({'left':posX - parseInt(tooltipW) - 5 + 'px'});
        arrow.removeClass('topLeft').addClass('topRight');
    }
});

$('td.tooltip-container').hoverIntent(function() {
    $(this).find('.tooltip-wrapper').show();
}, function() {
    $('.tooltip-wrapper').hide();
});