title: Accessing context of tag elements to hide/show that element
body: <pre><code>&lt;tooltip message=&quot;Click&quot; content=&quot;preview&quot;&gt;&lt;/tooltip&gt;
      &lt;tooltip message=&quot;Tooltip 1&quot; class=&quot;repeat-tooltip&quot; content=&quot;Click tooltip 1 preview&quot;&gt;&lt;/tooltip&gt;
      &lt;tooltip trigger=&quot;hover&quot; class=&quot;repeat-tooltip&quot; message=&quot;Hover Tooltip&quot; content=&quot;Hover tooltip preview&quot;&gt;&lt;/tooltip&gt;
  </code></pre>
  <p>New and trying to create a custom tooltip tag and only one tooltip will be active at a time.</p>
  <pre><code>   &lt;tooltip&gt;
         &lt;p class=&quot;tooltip-content&quot; control=&quot;tooltip&quot;&gt;{ message } ref=&quot;target&quot;&lt;/p&gt;
         &lt;div class=&quot;tooltip-wrapper&quot; show={show_message} ref=&quot;content&quot;&gt;
            //inner html
         &lt;/div&gt;
     &lt;/tooltip&gt;
  </code></pre>
  <p>Trying to use show toggling show_message value to display and hide the tooltips. But show_message is within the context of that particular elements click event. Onclick of a particular tooltip, how can I access other custom tag's context to hide the value of that particular element if that tooltip already open?</p>
  <pre><code>   this.root.addEventListener('click', (e) =&gt; that.toggle_message(e));
  
     this.toggle_message = function(e) {
          //here close all other tooltips before opening this one. How can I access the refs of all the open tooltip?
  
          this.show_message = !this.show_message;
          this.update();
      };
  </code></pre>