Adding Tooltip to Timepicker Sliders

Timepicker with Tooltips

I had a timepicker user ask recently about adding a tooltip to the timepicker's sliders. Well I thought that may be a nice topic to touch on, as it can be a bit tricky, and potentially a bit of a hack. I opted to show you a quick hack solution instead of a detailed integrated solution as I figure it be clearer. I used the fancy qTip2 library for the tooltips here, but I figure most any library would work equally the same.

Lets dive right in. We first need to know when and how to access our sliders. This can be tricky and where I mentioned above I could provide a more integrated solution, but for most uses this hack would be the most clear cut way as it simply uses the beforeShow event of datepicker. Timepicker adds a third option to this event which is a timepicker instance:

beforeShow(input, dp_inst, tp_inst){ /*...*/ }

Now the only problem here is that even though there is a timepicker instance, it has not yet generated any html (neither has datepicker), so you will notice a timeout, which allows a second for this to occur. Once the timeout occurs you will notice some pretty straight forward code: Grab the sliders (and handles), add tooltips to the handles, and update the tooltip text on the slide event.

Now lets take a look at the entire solution:

$(document).ready(function() {

        stepHour: 1,
        stepMinute: 1,
        beforeShow: function(input, dp_inst, tp_inst){

                var $sliders = $().add(tp_inst.hour_slider).add(tp_inst.minute_slider);

                $sliders.each(function(i, obj){
                    var $t = $(this);
                    var handle = $('.ui-slider-handle', $t);

                        content: '' + parseInt($t.slider('option', 'value'), 10),
                        position: {
                            my: 'bottom center',
                            at: 'top center',
                            container: handle
                        show: {
                            delay: 100
                        style: {
                            classes: 'ui-tooltip-slider',
                            widget: true

                    $t.bind("slide", function(event, ui){
                        var val = $t.slider('option', 'value');
                        handle.qtip('option', 'content.text', '' + parseInt(val,10) );
                }); // end each

            }, 10); // must give datepicker a second to create itself as it has not done so at this point


I did notice a performance issue with my stepHour, stepMinute, so I had to adjust those to 1 as the event for slide was firing too much. That's all! A quick tooltip solution to jQuery Timepicker Addon sliders! Enjoy!