将标签元素的上下文访问到 hide/show 该元素

Question

<tooltip message="Click" content="preview"></tooltip>
    <tooltip message="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>

新尝试创建自定义工具提示标签，但一次只有一个工具提示处于活动状态。

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

正在尝试使用 show toggling show_message 值来显示和隐藏工具提示。但是 show_message 在该特定元素单击事件的上下文中。单击特定工具提示时，如果该工具提示已打开，我如何访问其他自定义标记的上下文以隐藏该特定元素的值？

   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();
    };

Answer 1

根据 Riot.js 的规范，我找不到任何可以让您跟踪所有相同类型标签的东西，因此我能想到的针对此特定场景的解决方案是将工具提示集合存储在windows 和 show/hide 他们点击每个单独的工具提示。

由于我没有您发布的所有组件，我在 here 上创建了最低限度的工作示例。

我的演示组件如下所示：

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

在挂载事件中，它会将自己添加到 window.tooltips 数组集合中，稍后当其中一个组件被单击时，事件处理程序会遍历所有已注册的组件并在显示当前组件之前隐藏它们。

Answer 2

更新 - 我在这里使用暴乱事件找到了更好的解决方案。将事件添加到 windows 并在文档正文单击和其他触发元素单击时收听该事件，以便您将获取所有工具提示的上下文并将其关闭。

将标签元素的上下文访问到 hide/show 该元素

Accessing context of tag elements to hide/show that element

javascript

custom-tags