How to show a tooltip on button click using Angular1

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"