Question

我设计了一个仅使用html和css的工具提示。我不能使用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;                  
    }

工具提示正在运行。但是我希望此工具提示在点击按钮时来点击，因为我正在使用 Angular1 。谁能帮助我如何做到这一点。我是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显示按钮单击时的工具提示

1 个答案: