ANGULARJS Implement button hint and click Color Effect _ANGULARJS

This article with Angularjs simple implementation of a small button hint, button click will change color, note that the HTML file needs to introduce Jquery.js and angular.js

Run Screenshots:

The style of the button changes when the button is clicked:

CSS code:

<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 code:

<div ng-controller= "Buctipcontroller" >
 <!--directive--> <buc-button id= "numbertype"
 button " Tip-title = "This is the hint" style= "margin-top:60px;" ></buc-button>
</div>

JS Code:

<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=" Bucselectedbutt On bucselected ' ng-click= ' clicked () ' Ng-mouseover = ' mouseover () ' Ng-mouseout = ' mouseout () ' >{{mytitle}}\ <div s Tyle= ' border:1px solid #dcdcdc; border-radius:6px;width:auto;height:20px;line-height:20px;position:absolute;top:- 40px;padding:5px;white-space:nowrap;background-color: #fafafa;d isplay:none;color: #000; left:20px; ' class= ' tip ' >{{tiptitle}}\ <span style= ' position:absolute;top:25px;left:10px;background-color: #fafafa border:1px Solid Dcdcdc;width: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>

Mouse move into the button, tip tips appear, the mouse moved out when tip disappeared. Tip of the small triangle I was using the CSS3 attribute to achieve.

Summarize

The above is the entire content of this article, I hope to learn Angularjs can help. If you have any questions, you can exchange messages.