这是我尝试过的:
在外部工具提示上，我放了一个这样的类:
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">好好好I have two tooltips, one is on an outer element, the other on the inner element like this:
How do I remove the outer tooltip when the inner tooltip is showing?
The code is pretty standard, but keep in mind, sometimes v-tooltip places tooltips like a modal - on the body level, so the tooltips might not actually be nested.
<div id="app">
<div v-tooltip="'Outer Tooltip'">
Outer Area
<div v-tooltip="'Inner Tooltip'">
okokok
</div>
</div>
</div>
Here's what I've tried:
On the Outer Tooltip I put a class like this:
v=tooltip="{content:'Outer Tooltip', classes:['killOnOtherOpen']}"
And then on the inner tooltip:
v=tooltip="getTextAndDoStuff()"
...
getTextAndDoStuff(){
$('.killOnOtherOpen').close();
return "Inner Tooltip";
}
But I get an Error:
I've tried it like so: .close; - like close is not a function - but nothing happens, not even an error.
I'm looking for a more elegant or standard way to do this. Adding a class and a method to each nested tooltip set will take a while.
You could fix this issue by using the stop modifier when handling the mouseoverevent, and add a boolean property called isOpen to show/hode the outer tooltip.
the stop modifier will prevent the event propagation
console.clear()
new Vue({
el: '#app',
data: {
isOpen: false,
message: 'Outer Tooltip'
}
})body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
.box {
border: 1px solid red;
border-radius: 2px;
padding: 15px;
margin: 20px;
text-align: center;
cursor: pointer;
}
.box:hover {
box-shadow: 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="app">
<div v-tooltip="{content: message,
show: isOpen}" class="box" @mouseover.stop="isOpen=true">
{{ message }}
<div v-tooltip="'Inner tooltip'" @mouseover.stop="isOpen=false" class="box">
okokok
</div>
</div>
</div>这篇关于如何在内部 v-tooltip 悬停时关闭外部 v-tooltip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！