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;
}
私はこのツールチップが来てほしいworking.Butツールチップは、NG-クリック上にあるボタンのクリックで、私が使用していますようAngular1を。誰かがこれを行う方法を教えてもらえますか？私はAngular1に非常に慣れていません。
まず、ツールチップにng-showを追加します
<div class="box" ng-show="displayTooltip">
<h3>Tooltip</h3>
</div>
ボタンにng-clickを追加して、displayTooltipをtrueにします。
ng-click="displayTooltip = true"
ボタンクリックでツールチップを非表示にしたい場合は、
ng-click="displayTooltip = !displayTooltip"
または、mouseleaveventの使用時に非表示にしたい場合
ng-mouseleave="displayTooltip = false"
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加