jQuery UI Slider Tooltip

Tooltip on jQueryUI Slider component

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css">
<div id="slider"></div>

CSS

body {
    margin: 50px;
}
.tooltip {
    background: #1496bb;
    bottom: 100%;
    color: #fff;
    display: block;
    left: -13px;
    margin-bottom: 13px;
    opacity: 1;
    padding: 5px 8px;
    pointer-events: none;
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
 .tooltip:before {
    bottom: -20px;
    content:" ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
/* CSS Triangles */
 .tooltip:after {
    border-left: solid transparent 8px;
    border-right: solid transparent 8px;
    border-top: solid #1496bb 8px;
    bottom: -8px;
    content:' ';
    height: 0;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    width: 0;
}
.ui-slider-handle.ui-state-focus {
    outline: 0;
}

JavaScript

var initialValue = 2012;

var sliderTooltip = function (event, ui) {
    var curValue = ui.value || initialValue;
    var target = ui.handle || $('.ui-slider-handle');
    var tooltip = '<div class="tooltip">' + curValue + '</div>';
    var tooltipPos = (parseInt($(target).css('left'), 10) /50) * -1 + 'px';
    console.log(tooltipPos);

    $(target).html(tooltip).find('.tooltip').css('margin-left', tooltipPos);
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});