How to show a tooltip on button click using Angular1 - angularjs

Question

I have designed a tooltip using only html and css.I cannot use bootstarp.Below is my code for tooltip.
<div class="box">
<h3>Tooltip</h3>
</div>
h3 {
text-align:center;
line-height:33px;
}
div.box {
height:100px;
width:200px;
background-color:#eee;
border:1px solid #aaa;
position:relative;
top:50px;
left:50px;
border-radius:7px;
}
.box:before {
position:absolute;
right:-20px;
top:5px;
content:'';
height:0;
width:0;
border:10px solid transparent;
z-index:1;
}
.box:after{
position:absolute;
right:-17px;
top:25px;
content:'';
height:0;
width:0;
border-top: 8px solid transparent;
border-left: 8px solid #aaa;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
z-index:1;
}
The tooltip is working.But i want this tooltip to come on button click that is on ng-click as i am using Angular1.
Can anyone please help me how to do this.I am very new to Angular1.

Answer 1

first add a ng-show to your tooltip
<div class="box" ng-show="displayTooltip">
<h3>Tooltip</h3>
</div>
and add ng-click to your button to make displayTooltip true
ng-click="displayTooltip = true"
if you want to make tooltip invisible on button click use
ng-click="displayTooltip = !displayTooltip"
or if you want to make it invisible on mouseleavevent use
ng-mouseleave="displayTooltip = false"