Help us understand the problem. What is going on with this article?

Bootstrapのツールチップを数秒待って自動で閉じるようにする

More than 3 years have passed since last update.

ヘルプを表示したりするときにBootstrapのツールチップがとても便利なのですが、フォーカスを外れたタイミングで自動で閉じてくれない場合があります。

そのような状況では自動的に閉じてもらいたいので、ツールチップが開いてから5秒後にツールチップを強制的に閉じるコードを準備しました。

  $("[rel=tooltip]").tooltip().on("show.bs.tooltip", function() {
    setTimeout(function () {
      $(".tooltip").fadeOut('fast', function() {
        $(this).remove();
      });
    }, 5000);
  });

".tooltip"が開いているツールチップです。ツールチップが開いたタイミングでタイムアウトを5秒間で指定、5秒後にフェードアウトのエフェクトを行った後にDOMを削除します。

Bootstrap#tooltipsのオプションは以下URLをご確認ください。
http://getbootstrap.com/javascript/#tooltips

tkosuga@github
札幌でウェブプログラマしてます。ウェブ技術全般ブログはじめました
http://tkosuga.hateblo.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away