jQuery UI tooltip on toggle

Question

There is such problem: Tooltip doesn't show on page. it shows only if i click on toggle.

How can i do that tooltip will show without clicking on toggle...?

Here is the code:

Js:

var tooltipD = $('<div id="days_tooltip" />').css({
    position: 'absolute',
    top: -30,
    left: -14,
    width: 45,
    height: 20,
    textAlign: "center",
    display: "block",
    background: "#FFF",
    border: "1px solid lightgray",
    borderRadius: 5,
    paddingTop: 3
});

$("#someid").slider({
    range:"max",
    min:0,
    max:7,
    value:1,
    slide:function (event, ui) {
//        tooltipD.text(ui.value);
    }
    }).find(".ui-slider-handle").append(tooltipD);

 $("#someid").val($("#someid").slider("value"));

Are you wanting the tooltip hover over the slider handler? – Kaizen Programmer Mar 05 '13 at 14:02 — Kaizen Programmer, Mar 05 '13 at 14:02

score 0 · Answer 1 · answered Mar 05 '13 at 14:19

This seems to work. DEMO

$(function () {

    var tooltipD = $('<div id="days_tooltip" />').css({
        position: 'absolute',
        top: -30,
        left: -14,
        width: 45,
        height: 20,
        textAlign: "center",
        display: "block",
        background: "#FFF",
        border: "1px solid lightgray",
        borderRadius: 5,
        paddingTop: 3
    }).text(1);

    $("#slider").slider({
        range: "max",
        min: 0,
        max: 7,
        value: 1,
        slide: function (event, ui) {
            $("#days_tooltip").text(ui.value);
        }
    }).find(".ui-slider-handle").append(tooltipD);

});

jQuery UI tooltip on toggle

1 Answers1