Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery tooltip set timeout

I want to show a tooltip which will disappear after 3 seconds time.

How should I modify my code? seems commented code will not work:

http://jsfiddle.net/sMJ2T/1/

HTML

<div id="mytooltip" title="the message"></div>

JS

$(function() {
    $('#mytooltip').tooltip();

    $('#mytooltip').tooltip({
    open: function(e,o){
        $(o.tooltip).mouseover(function(e){
            $('#mytooltip').tooltip('close');
        });
        $(o.tooltip).mouseout(function(e){
        });         
    },
    close: function(e,o) {},
    show: { duration: 800 }
});

    $('#mytooltip').tooltip('open');//.delay(2000).tooltip('close');


});
like image 793
monjevin Avatar asked Mar 22 '23 20:03

monjevin


1 Answers

You can do it like this:

$(function () {
    $('#mytooltip').tooltip();

    $('#mytooltip').tooltip({
        open: function (e, o) {
            $(o.tooltip).mouseover(function (e) {
                $('#mytooltip').tooltip('close');
            });
            $(o.tooltip).mouseout(function (e) {});
        },
        close: function (e, o) {},
        show: {
            duration: 800
        }
    });

    $('#mytooltip').tooltip('open');
    setTimeout(function () {
        $('#mytooltip').tooltip('close'); //close the tooltip
    }, 3000); //but invoke me after 3 secs
});

Fiddle.

like image 155
Icarus Avatar answered Apr 05 '23 22:04

Icarus