Wednesday, 29 August 2018

Riot.js - Accessing context of tag elements to hide/show that element

<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.



from Riot.js - Accessing context of tag elements to hide/show that element

No comments:

Post a Comment