Riot.js - 访问标记元素的上下文以隐藏/显示该元素

Question

<tooltip message="Click Tooltip" content="Click tooltip preview"></tooltip>
    <tooltip message="Click Tooltip 1" class="repeat-tooltip" content="Click tooltip 1 preview"></tooltip>
    <tooltip trigger="hover" class="repeat-tooltip" message="Hover Tooltip" content="Hover tooltip preview"></tooltip>

New to Riot.js trying to create a custom tooltip tag and only one tooltip will be active at a time.

   <tooltip>
       <p class="tooltip-content" control="tooltip">{ message } ref="target"</p>
       <div class="tooltip-wrapper" show={show_message} ref="content">
          //inner html
       </div>
   </tooltip>

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?

   this.root.addEventListener('click', (e) => 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();
    };

Thanks in advance.

Answer 1

From the specs of Riot.js I could not find anything that will allow you to keep track of all tags of same type so solution that I can think of for this particular scenario is to store collection of tooltips under windows and show/hide them on click of each individual tooltip.

As I do not have all component that you posted, I created bare minimum working example over here .

My demo component look like:

<tooltip>
    <p>{ content }</p>
    <span riot-style="display: { show_message ? 'inline-block' : 'none' }; background: black; color: white; padding:3px;"> { message } </span>
        const self = this;

    this.content = opts.content || '';
    this.message = opts.message || '';
    this.root.addEventListener('click', (e) => self.showTooltip(e));
    this.toggle_message = function(show) { 
      self.show_message = show;
        self.update();
    };
    this.showTooltip = function(e){
      const bShow = !self.show_message;
        for(var i=0; i<window.tooltips.length; i++){
          window.tooltips[i].toggle_message(false);
        }
        self.toggle_message(bShow);
    };

    <script>
      this.on('mount', function(){
        if(!window.tooltips)
          window.tooltips = [];

        window.tooltips.push(this);
      });
    </script>
</tooltip>

On mount event it adds it's self to window.tooltips array collection and later when one of the components is clicked, event handler iterates through all registered components and hides them before showing current component.

Answer 2

Update - I found a better solution here using riot events. Add the events to windows and listen to that event on document body click and other trigger elements click, so that you will get the context of all tooltips and close it.