如何使用 Angular1 在单击按钮时显示工具提示

Question

我只使用 html 设计了一个工具提示，css.I 不能使用 bootstarp.Below 是我的工具提示代码。

<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;                  
    }

工具提示是 working.But 我希望这个工具提示出现在 在 ng-click 上的按钮点击上，因为我正在使用 Angular1。谁能帮我怎么做 this.I 我是 Angular1 的新手。

Answer 1

首先将 ng-show 添加到您的工具提示中

<div class="box" ng-show="displayTooltip">
  <h3>Tooltip</h3>
</div>

并将 ng-click 添加到您的按钮以使 displayTooltip 为真

ng-click="displayTooltip = true"

如果你想让工具提示在按钮单击时不可见，请使用

ng-click="displayTooltip = !displayTooltip"

或者如果你想让它在 mouseleavevent 上不可见，请使用

ng-mouseleave="displayTooltip = false"

如何使用 Angular1 在单击按钮时显示工具提示

How to show a tooltip on button click using Angular1

angularjs

tooltip

angularjs-ng-click