Twitter Bootstrapのツールチップをタイピングしながら表示する

あああああああああああああああああああああああああああああああああああああああああああああああああああリンク１ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああリンク２あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

Twitter Bootstrapのツールチップ・プラグインにはjQuery UIにあるようなイベントハンドラの指定ができないので、Twitter Bootstrap.jsに自作コードを追加します。

Twitter Bootstrap.js（v2.0.4）の1007行目あたりに下記のコードを挿入 ...... ...... ...... $tip .remove() .css({ top: 0, left: 0, display: 'block' }) .appendTo(inside ? this.$element : document.body) /* 以下の1行コードを挿入 */ this.options.onShow && this.options.onShow($tip) pos = this.getPosition(inside) actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight ...... ...... ......

ツールチップを初期化するとき、onShowイベントハンドラを指定する $(function () { var typing = function ($tip) { var i, len, tooltip, title, type; tooltip = $tip.find('.tooltip-inner'); title = tooltip.text(); type = function (index) { tooltip.queue(function () { tooltip.text(title.substring(0, index + 1)); tooltip.dequeue(); }).delay(80); }; tooltip.css({textAlign: 'left'}).width(tooltip.width() + 1); tooltip.html(''); for (i = 0, len = title.length; i < len; i += 1) { type(i); } }; $('#link1').tooltip({ onShow: function ($tip) { typing($tip); } }); $('#link2').tooltip({ onShow: function ($tip) { typing($tip); } }); });