angular实现的按钮提示

用angularJS简单实现了一个小的按钮提示，html文件中需要引入jquery.js和angular.js

css代码：

<style type="text/css">
        *{margin: 0px;padding: 0px;}
        .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}
        .bucSelected {border:1px solid rgb(195,195,195);color:#000;cursor: pointer;border-radius: 6px;background-color: rgb(255,255,255);}
        .bucSelectedHover{border: 1px solid rgb(74,201,255);color: rgb(74,201,255);cursor: pointer;border-radius: 6px;background-color: rgb(238,249,254);}
        .bucSelectedHover .tip {color: rgb(0,0,0);background-color: rgb(255,255,255);}
    </style>

html代码：

<div ng-controller="bucTipController">
    <!-- 指令 -->
    <buc-button id="numberType" my-title="按钮" tip-title = "这个是提示" style="margin-top:60px;"></buc-button>
</div>

js代码：

<script type="text/javascript">
var app = angular.module("tip",[]);
app.controller("bucTipController",function(){

})
.directive("bucButton",function(){
    return {
        restrict : 'E',
        replace : true,
        scope : {
            myTitle : "@",
            id : "@",
            tipTitle : "@"
        },
        template : "<button class='bucSelectedButton bucSelected' ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}}
                <div style='border:1px solid #dcdcdc;border-radius:6px;auto;height:20px;line-height:20px;position:absolute;top:-40px;padding:5px;white-space:nowrap;background-color:#fafafa;display:none;color:#000;left:20px;' class='tip'>{{tipTitle}}
                    <span style='position:absolute;top:25px;left:10px;background-color:#fafafa;border:1px solid #dcdcdc;10px;height:10px;transform:rotate(45deg);border-left:none;border-top:none;'>
                    </span>
                </div>
                </button>",
        link : function(scope,elem,attrs) {
            scope.mouseover = function(){
                $(".tip").show();
            }

            scope.mouseout = function(){
                $(".tip").hide();
            }

            scope.clicked = function(){
                elem.toggleClass("bucSelectedHover");
                $(".tip").hide();
            }
        }
    }
})
</script>

运行截图：

当点击按钮的时候 按钮的样式改变：

鼠标移入按钮，tip提示出现，鼠标移出的时候，tip消失。tip的小三角我是利用了css3的属性来实现的。