如何在内部 v-tooltip 悬停时关闭外部 v-tooltip [英] How to close outer v-tooltip on inner v-tooltip hover

问题描述

我有两个工具提示，一个在外部元素上，另一个在内部元素上，如下所示:

如何在显示内部工具提示时删除外部工具提示?

这是一个小提琴

代码非常标准，但请记住，有时v-tooltip像模态一样放置工具提示 - 在正文级别，因此工具提示实际上可能不会嵌套.

<div v-tooltip="'外部工具提示'">外区<div v-tooltip="'内部工具提示'">好好好

<小时>

这是我尝试过的:

在外部工具提示上，我放了一个这样的类:

v=tooltip="{content:'Outer Tooltip', classes:['killOnOtherOpen']}"

然后是内部工具提示:

v=tooltip="getTextAndDoStuff()"...getTextAndDoStuff(){$('.killOnOtherOpen').close();返回内部工具提示"；}

但我收到一个错误:

<块引用>

渲染错误:TypeError: $(...).close is not a function"

我像这样尝试过:.close; - 就像 close 不是一个函数 - 但没有任何反应，甚至没有错误.

我正在寻找一种更优雅或更标准的方式来做到这一点.向每个嵌套的工具提示集添加一个类和一个方法需要一段时间.

解决方案

您可以通过在处理 mouseover 事件时使用 stop 修饰符来解决此问题，并添加一个名为 isOpen 的布尔属性，用于显示/隐藏外部工具提示.

stop 修饰符将阻止事件传播

console.clear()新的 Vue({el: '#app',数据: {isOpen: 假，消息:'外部工具提示'}})

body {字体系列:无衬线；边距:42px；}.工具提示{显示:阻止！重要；z-索引:10000；}.tooltip .tooltip-inner {背景:黑色；白颜色;边框半径:16px；填充:5px 10px 4px；}.tooltip .tooltip-箭头 {宽度:0；高度:0；边框样式:实心；位置:绝对；边距:5px；边框颜色:黑色；}.tooltip[x-placement^="top"] {底边距:5px；}.tooltip[x-placement^="top"] .tooltip-arrow {边框宽度:5px 5px 0 5px；边框左颜色:透明！重要；边框右颜色:透明！重要；边框底部颜色:透明！重要；底部:-5px；左:计算(50% - 5px)；边距顶部:0；底边距:0；}.tooltip[x-placement^="bottom"] {边距顶部:5px；}.tooltip[x-placement^="bottom"] .tooltip-arrow {边框宽度:0 5px 5px 5px；边框左颜色:透明！重要；边框右颜色:透明！重要；边框顶部颜色:透明！重要；顶部:-5px；左:计算(50% - 5px)；边距顶部:0；底边距:0；}.tooltip[x-placement^="right"] {左边距:5px；}.tooltip[x-placement^="right"] .tooltip-arrow {边框宽度:5px 5px 5px 0；边框左颜色:透明！重要；边框顶部颜色:透明！重要；边框底部颜色:透明！重要；左:-5px；顶部:计算(50% - 5px)；左边距:0；边距右:0;}.tooltip[x-placement^="left"] {右边距:5px；}.tooltip[x-placement^="left"] .tooltip-arrow {边框宽度:5px 0 5px 5px；边框顶部颜色:透明！重要；边框右颜色:透明！重要；边框底部颜色:透明！重要；右:-5px；顶部:计算(50% - 5px)；左边距:0；右边距:0；}.tooltip[aria-hidden='true'] {可见性:隐藏；不透明度:0；过渡:不透明度 0.15 秒，可见度 0.15 秒；}.tooltip[aria-hidden='false'] {可见性:可见；不透明度:1；过渡:不透明度 0.15s；}.盒子 {边框:1px纯红色；边界半径:2px；填充:15px；边距:20px；文本对齐:居中；光标:指针；}.box:悬停{框阴影:0 0 4px；}

<script src="https://unpkg.com/popper.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/v-tooltip"></script><div id="应用程序"><div v-tooltip="{content: message,显示:isOpen}" class="box" @mouseover.stop="isOpen=true">{{ 信息 }}<div v-tooltip="'内部工具提示'" @mouseover.stop="isOpen=false" class="box">好好好