Question

有没有办法动态隐藏 core-tooltip ？一般来说，我希望关闭工具提示。但是，如果确定需要工具提示的 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 的错误属性。在这种情况下，输入时输入字段没有内容，因此标签应该足够提示，所以我不希望显示工具提示。但是，如果他们输入一个已经被使用的名称，我只想显示工具提示。我可以通过在收听 onKeyUp 的同时查看地图来确定 paper-input 中的名称是否正在使用。但是，如果没有提示，我怎么能关掉它？

如果我设置样式 display：none ，则仍会显示空箭头的箭头和小圆体。

我只是想找到一种禁用 / 启用 CoreTooltip的方法。

Answer 1

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

首先在代码中选择CoreTooltip。要启用它，您可以向 core-tooltip

添加ID

    <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使用querySelector使用 / deep / 抓取内部元素的方法（另请参阅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 实例以查找实际元素，不确定确定此问题的最佳方法你试图隐藏。在这种情况下，实际的tip div有一个id tooltip 来查询。但不确定这在封装方面是一个好策略。

Answer 2

CSS解决方案。

我将其绑定到invalid属性仅用于演示目的。

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_tooltip.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">

<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }

      core-tooltip[hide="true"]:focus::shadow .polymer-tooltip,
      core-tooltip[hide="true"]:hover::shadow .polymer-tooltip {
        visibility: hidden !important;
      }
    </style>
    <core-tooltip position="bottom" label="Name can not already be present" hide="{{!isValidationError}}" >
      <paper-input floatingLabel
                   id="alias-input"
                   type="text"
                   label="Enter Name"
                   required invalid="{{isValidationError}}"
          >
      </paper-input>
      <span>isError: {{isValidationError}}</span>
    </core-tooltip>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

@CustomTag('app-element')

class AppElement extends PolymerElement {

  AppElement.created() : super.created() {  }

  @PublishedProperty(reflect: true) bool isValidationError;
}

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

2 个答案: