剑非出我心 2022-03-30 10:51 采纳率: 50%
浏览 113
已结题

tippy 插件冒泡问题

tippy插件是一个滑过后显示一个小标签

现在我的需求是这样的，如果我标签里面套了一层标签的话，滑过显示的时候会在上方显示两个标签，也就是冒泡没有解决。
那么如何才能在我嵌套标签的情况下、显示一个标签，并且内容显示全呢？

使用vue 有人之前遇到过这种情况吗，该如何解决？

img

img

鼠标移动到directive的时候就会出现下面的效果

img

  • 写回答

4条回答 默认 最新

  • bdawn 2022-04-02 16:44
    关注

    下面是html原生代码，使用vue原理一样

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<span id="span1" class="span1">aaaaa
    <span id="span2">My button</span>
</span>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
    // With the above scripts loaded, you can call `tippy()` with a CSS
    // selector and a `content` prop:
    const instance1 = tippy(document.getElementById('span2'))
    const instance2 = tippy(document.getElementById('span1'))
    instance1.setProps({
        content: 'My tooltip!',
        trigger: 'mouseover',
    })
    instance2.setProps({
        content: '111111',
        trigger: 'mouseover',
    })

    document.getElementById('span2').addEventListener('mouseover', e => {
        instance1.show()
        e.stopPropagation()
    })
    document.getElementById('span2').addEventListener('mouseout', e => {
        instance1.hide()
        e.stopPropagation()
    })
    document.getElementById('span1').addEventListener('mouseover', e => {
        instance2.show()
    })
    document.getElementById('span1').addEventListener('mouseout', e => {
        instance2.hide()
    })
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 4月10日
  • 已采纳回答 4月2日
  • 修改了问题 3月31日
  • 修改了问题 3月31日
  • 展开全部

悬赏问题

  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥100 已有python代码，要求做成可执行程序，程序设计内容不多
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助
  • ¥15 STM32控制MAX7219问题求解答
  • ¥20 在本地部署CHATRWKV时遇到了AttributeError: 'str' object has no attribute 'requires_grad'