やったこと

webサービスを作るときに考えたことを垂れ流します

Twitter BootstrapのツールチップでAリンクを無効にする!

ツイッター・ブートストラップに「Tooltip」という機能があります。

これを使うと、例えば「ヘルプ」みたいな文章にマウスをフォーカスすると、フワっと覆いかぶさるように説明文が表示される、とってもかっこいい効果ができます。

使い方は以下のような感じです。

★HTML
<a href="#" class="setumei" data-toggle="tooltip" data-placement="bottom" data-original-title="説明文だよ!">ヘルプ</a>

★Javascript
$(function(){
  $('.setumei').tooltip();
});

※Bootstrap公式サイト

Javascript · Bootstrap

ここでちょっとやっかいなのが「a href="#"」の箇所です。こう書くと文章をクリックしたときに画面がトップに遷移してしまって、ちょっとうざいんですよね・・。
なので以下のようにして、クリックしたときに画面の移動を中止してしまいましょう。

★Javascript
$(function(){
  $('.setumei').tooltip();
  $('.setumei').click(function(){
        return false;
  });
});

これで画面が移動しなくなって、だいぶ使い勝手が良くなりました・・。