dart - 您如何以编程方式仅从核心元素中禁用/隐藏 CoreTooltip？

Question

有没有办法动态隐藏核心工具提示？一般来说，我希望工具提示关闭。但是，如果确定需要工具提示的 content 元素包含明显无效的数据，我想查看工具提示。

例如:

    <core-tooltip position="bottom" label="Name can not already be present">
      <paper-input floatingLabel
                   id="alias-input"
                   type="text"
                   label="Enter Name"
                   >
      </paper-input>
    </core-tooltip>

我正在尝试使用它来代替 PaperInput 的 error 属性。在这种情况下，输入字段没有内容，所以 label 应该足够提示，所以我不想显示工具提示。但是，如果他们输入的名称已被使用，我只想显示工具提示。我可以通过在收听 onKeyUp 时查看 map 来确定是否正在使用 paper-input 中的名称。但是，如果它不存在，我该如何关闭它呢？

如果我设置样式display:none，空尖端的箭头和小体仍然显示。

我只是在寻找一种方法来禁用/启用 CoreTooltip。

Answer 1

我找不到使用组件 API 的方法。这似乎有效:

首先选择代码中的CoreTooltip。要启用它，您可以将 id 添加到 core-tooltip

    <core-tooltip id="cttp" position="bottom" label="Name can not already be present">
      <paper-input floatingLabel
                   id="alias-input"
                   type="text"
                   label="Enter Name"
                   >
      </paper-input>
    </core-tooltip>

然后使用 Gunter 的方法，使用带有 /deep/ 的 querySelector 获取内部元素(另见 How to programmatically clear PaperInput and have the floating label drop down to the input line)

    final ttip = $['cttp'].querySelector('* /deep/ #tooltip');
    (ttip as DivElement).style.display = 'none';

诀窍是知道如何只选择 core-tooltip 的tip 然后隐藏它。不确定确定这一点的最佳方法，方法是尝试研究 core-tooltip 的代码或深入查看工具提示检查器中的 #shadowDom 实例以找到实际元素你想隐藏。在这种情况下，实际的提示 div 有一个 tooltip 的 id 来查询。不过，不确定这在封装方面是否是一个好的策略。