我只使用 html 和 css 设计了一个工具提示。我不能使用 bootstarp。下面是我的工具提示代码。
<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;
}
工具提示正在工作。但我希望此工具提示出现在 ng-click 上的按钮单击时，因为我正在使用Angular1。任何人都可以帮助我如何做到这一点。我对 Angular1 很陌生。
首先在你的工具提示中添加一个 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"
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句