3

我想为每个人都有关闭按钮，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

请帮助我提前谢谢！

4

2 回答 2

5

它实际上比 Gifford N. 的答案更容易......

<button data-tippy-content="&lt;span class=&quot;closeme&quot;&gt;&amp;times;&lt;/span&gt;There are many like it but this one is mine!!!!!">
  This is my button
</button>

const tippyInstance = tippy('[data-tippy-content]', {
  allowHTML: true,
  interactive: true,
  onShow(instance) {
    instance.popper.querySelector('.closeme').addEventListener('click', () => {
      instance.hide();
    });
  },
  onHide(instance) {
    instance.popper.querySelector('.closeme').removeEventListener('click', () => {
      instance.hide();
    });
  },
});
于 2020-05-26T14:16:18.400 回答
1

您正在寻找的行动是.hide()。

要使用此操作，您必须对代码进行一些调整：

  1. 添加interactive: true到小费设置。
tippy('#t1,#t2,#t3,#t4',{
   ...
   interactive: true,
   ...
});`
  1. 将.hide();操作分配给函数中的popper属性settings.forEach：
settings.forEach(function(sett){
  ...
  tip._tippy.popper.onclick = function() {
    tip._tippy.hide();
  }
});

~

专家提示：

如果您想在单击弹出器中的特定元素时隐藏弹出器（X例如），它只需要更多的标记：

  1. 向所需元素添加一些标记<button class=\"hide\">X</button>

  2. 使用 onclick 中的元素：

settings.forEach(function(sett){
  ...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
  tip._tippy.hide();
}

更新的 Codepen： https ://codepen.io/gnowland/pen/wvBzjym?editors=0010

于 2019-12-15T02:38:25.863 回答