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">
<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">
                        <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>
            </td>
        </tr>
        <tr>
            <td><span>002</span></td>
            <td class="tooltip-container">
                <span>Κοσμίδης</span>
                <div class="tooltip-wrapper">
                    <div class="tooltip-arrow">
                        <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>
  ...

CSS

td {
    padding: 5px;
}

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

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

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

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 tooltip = $('div.tooltip-wrapper');
    //alert(posX + ' - ' + posY);
    tooltip.css({'top':posY + 10 + 'px','left':posX + 10 + 'px'});
});