如何在内部 v-tooltip 悬停时关闭外部 v-tooltip

Question

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?

Here's a Fiddle

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:

Error in render: "TypeError: $(...).close is not a function"

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.

Answer 1

You could fix this issue by using the stop modifier when handling the mouseover event, 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>