我想为每个tooltip
都设置关闭按钮,我怎么能拥有它?
注意:我不想弄乱设计,这就是为什么没有尝试太多,我在这里寻找最佳解决方案的原因
下面是演示:
tippy('#t1,#t2,#t3,#t4',{
content: "Error Message",
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
trigger:'manual',
placement:'bottom',
hideOnClick:false,
});
var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"},
{id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];
settings.forEach(function(sett){
var tip = document.querySelector(sett.id);
tippy(tip);
tip._tippy.set({content:"click x",placement:sett.pos});
tip._tippy.show();
});
div.tippy-dummy{
position: relative;
width: 220px;
height: 30px;
background: #333;
color: #fff;
}
div.tippy-dummy span{
position: absolute;
display: inline-block;
background: #715a5a;
right: 0;
top: 0;
}
.tooltip{
display:flex;
justify-content:space-between;
width: 90%;
}
.btn{
width: 90px;
height: 30px;
border: 2px solid #ccc;
border-radius: 6px;
}
.btn:hover{
cursor: pointer;
background:#f05a27;
}
.tooltip{
margin-top:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<h4>Expected output:</h4>
<div class="tippy-dummy">
Please click X to hide
<span>X</span>
</div>
<hr/>
<div class="tooltip">
<button id="t1" class="btn tippy" title="">top</button>
<button id="t2" class="btn tippy" title="">bottom</button>
<button id="t3" class="btn tippy" title="">Left</button>
<button id="t4" class="btn tippy" title="">Right</button>
</div>
[为了得到更好的查看,这里是codepen: https://codepen.io/anon/pen/aPXKZM
请先帮助我,谢谢!!
您要寻找的动作是.hide()
。
要使用此操作,您必须对代码进行一些调整:
interactive: true
添加到小费设置。tippy('#t1,#t2,#t3,#t4',{
...
interactive: true,
...
});`
.hide();
操作分配给popper
函数中的settings.forEach
属性:settings.forEach(function(sett){
...
tip._tippy.popper.onclick = function() {
tip._tippy.hide();
}
});
〜
[如果要在单击弹出窗口中的特定元素(例如X
)时隐藏该弹出窗口,则只需要多一点标记:
向所需元素<button class=\"hide\">X</button>
]中添加一些标记
使用onclick中的元素:
settings.forEach(function(sett){
...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
tip._tippy.hide();
}