個性的な三種類のツールチップ

　会社帰りに川島瑞樹さんと高垣楓さんと待ち合わせて焼き鳥屋でビール飲みたい

ngMouseOver/ngMouseLeaveでツールチップの表示/非表示を切り替え

index.html

<p class="text">
	Lorem ipsum dolor sit amet, 
	<span class="clickable" ng-mouseover="showTip($event,1)" ng-mouseleave="tip=0" >
		consectetur
	</span>
	<span class="tooltip" ng-style="toolTipStyle" ng-show="tip==1">
		Gottes Tod
	</span> adipiscing elit.
</p>

　神は死んだ

main.js

$scope.showTip=function(event,num){
	$scope.tip=num;
	$scope.toolTipStyle={'left':event.offsetX+'px','top':event.offsetY+'px'};
}

　$event引数を使ってツールチップの表示位置を調整しています。
　offsetXとoffsetYが親要素からの位置？っぽかったのでpにposition:relativeをかけました。なんとなく想定通りの場所になりました。だんだんCSSがやっつけ作業になっていきます。

ngMouseMoveでツールチップの表示位置を変更

index.html

<p class="text">
	Lorem ipsum dolor sit amet, 
	<span class="clickable" ng-mouseover="showTip($event,1)" ng-mousemove="moveTip($event)"  ng-mouseleave="tip=0" >
		consectetur
	</span>
	<span class="tooltip" ng-style="toolTipStyle" ng-show="tip==1">
		Gottes Tod
	</span> adipiscing elit.
</p>

main.js

$scope.moveTip=function(event){
	$scope.toolTipStyle={'left':event.offsetX+'px','top':event.offsetY+'px'};
}

$timeoutを使ってツールチップの消失を遅延させる

　日本語が来い

index.html

<p class="text">
	Lorem ipsum dolor sit amet, 
	<span class="clickable" ng-mouseover="showTip($event,1)" ng-mousemove="moveTip($event)"  ng-mouseleave="tip=0" >
		consectetur
	</span>
	<span class="tooltip" ng-style="toolTipStyle" ng-show="tip==1">
		Gottes Tod
	</span> adipiscing elit.
</p>

　ngMouseLeaveで関数を呼び出す中で$timeoutを用いて遅延を発生させます。
　$timeoutは$scopeと同じく読み込んでやらないと使えないので注意。

main.js

angular.module('sample', []).controller('IndexController',
		[ '$scope', '$timeout', function($scope, $timeout) {
			$scope.showTip=function(event,num){
				$scope.tip=num;
				$scope.toolTipStyle={'left':'350px','top':'-8px'};
			}
			
			$scope.hideTip=function(){
				$timeout(function(){
					$scope.tip=0;
				},3000);
			}
		} ]);

　あーちなみにこのコードだとツールチップはいくつあっても一つしか表示されないので（遅延してる間に別のツールチップを開こうとすると最初のツールチップが消える）、その場合は各ツールチップにboolean持たせるなどして対処してください。