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

Riot.js 的新手尝试创建自定义工具提示标签，并且一次只有一个工具提示处于活动状态。

   <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 切换 show_message 值来显示和隐藏工具提示。但 show_message 是在特定元素单击事件的上下文中。Onclick 特定工具提示，如果该工具提示已打开，我如何访问其他自定义标签的上下文以隐藏该特定元素的值？

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

提前致谢。

4

2 回答 2

6

从Riot.js我找不到任何可以让您跟踪相同类型的所有标签的规范中，我可以想到的解决方案是在窗口下存储工具提示的集合并在单击时显示/隐藏它们个人工具提示。

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

我的演示组件如下所示：

<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数组集合中，稍后当单击其中一个组件时，事件处理程序会遍历所有已注册的组件并在显示当前组件之前隐藏它们。

于 2018-08-29T04:32:04.123 回答
1

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

于 2018-09-05T17:28:10.543 回答