title: How to close outer v-tooltip on inner v-tooltip hover
body: <p>I have two tooltips, one is on an outer element, the other on the inner element like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9iU7y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9iU7y.png" alt="Nested Tooltips"></a></p>
  
  <p>How do I remove the outer tooltip when the inner tooltip is showing?</p>
  
  <p><strong><em><a href="https://jsfiddle.net/oey2rzgm/" rel="nofollow noreferrer">Here's a Fiddle</a></em></strong></p>
  
  <p>The code is pretty standard, but keep in mind, sometimes <a href="https://github.com/Akryum/v-tooltip#readme" rel="nofollow noreferrer">v-tooltip</a> places tooltips like a modal - on the body level, so the tooltips might not actually be nested.</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;div v-tooltip="'Outer Tooltip'"&gt;
      Outer Area
      &lt;div v-tooltip="'Inner Tooltip'"&gt;
        okokok
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong><em>Here's what I've tried:</em></strong></p>
  
  <p>On the Outer Tooltip I put a class like this:</p>
  
  <pre><code>v=tooltip="{content:'Outer Tooltip', classes:['killOnOtherOpen']}"
  </code></pre>
  
  <p>And then on the inner tooltip:</p>
  
  <pre><code>v=tooltip="getTextAndDoStuff()"
  ...
  getTextAndDoStuff(){
      $('.killOnOtherOpen').close();
      return "Inner Tooltip";
  }
  </code></pre>
  
  <p>But I get an Error:</p>
  
  <blockquote>
    <p>Error in render: "TypeError: $(...).close is not a function"</p>
  </blockquote>
  
  <p>I've tried it like so: <code>.close;</code> - like close is not a function - but nothing happens, not even an error. </p>
  
  <p>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.</p>