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.

NTP · Accepted Answer · 2017-12-09 08:03:03Z

2

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"

answered Dec 9, 2017 at 8:03

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ananya Over a year ago

Thanks @NTP. Its working.But one thing , I want to make tooltip invisible when i click outside of page(Not on button click). How to acheive that.Can you please tell me.

NTP Over a year ago

you can also add the ng-click function to your div

ananya Over a year ago

When i am adding ng-click to div ,then onclick of div only its getting invisible. I want to make it invisible when i click outside of div. @NTP

NTP Over a year ago

adding ng-click to the outer div should do the trick but it is difficult to guess without seeing the code, if you update your question I am sure we can figure something out.

ananya Over a year ago

Actually i want it like this.I have one button.And on that button click tooltip should show exactly left to that button.And i am not able to adjust this. for now my code is like below. <div class="box" ng-show="displayTooltip"> <h3>Tooltip</h3> </div> <button ng-click="displayTooltip = true" >OK</button> @NTP

Collectives™ on Stack Overflow

How to show a tooltip on button click using Angular1

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related