Как вы можете программно отключить / скрыть только CoreTooltip от основных элементов?

Question

Есть ли способ динамически скрыть всплывающую подсказку? В общем, я хочу, чтобы всплывающая подсказка была отключена. Однако, если определено, что элемент содержимого, требующий всплывающей подсказки, содержит явно недействительные данные, я хочу просмотреть эту подсказку.

Например:

    <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. Но тогда как можно отключить наконечник, если его нет?

Если я установил отображение стиля : ни одна стрелка и кускус тела пустого наконечника все еще не отображаются.

Я просто ищу способ отключить / включить CoreTooltip.

Answer 1

Решение 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;
}

Answer 2

Я не мог найти способ, используя API-интерфейс компонента. Это похоже на работу:

Сначала выберите CoreTooltip в коде. Чтобы включить это, вы можете добавить идентификатор в всплывающую подсказку

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

Затем используйте подход Гюнтера для захвата внутренних элементов с использованием querySelector с / deep / (см. Также Как программно очистить PaperInput и опустить плавающую метку до строки ввода)

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

Хитрость заключается в том, чтобы знать, как выбрать только верхнюю часть всплывающей подсказки, а затем скрыть ее. Не уверен, что лучший способ определить это - попытаться изучить код подсказки core-tool или перейти к экземплярам #shadowDom в инспекторе подсказок, чтобы найти фактический элемент, который вы пытаетесь скрыть. В этом случае фактическая подсказка div любезно имеет идентификатор подсказки для запроса. Не уверен, что это хорошая стратегия с точки зрения инкапсуляции.