Clever Geek Handbook

How can you programmatically disable / hide only CoreTooltip from main items?

Is there a way to dynamically hide the kernel prompt? In general, I want the tooltip to turn off. However, if it is determined that the content item that requires a balloon tip is clearly invalid, I want to see the balloon tip.

For example:

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

I am trying to use this instead of the PaperInput error attribute. In this case, when entering, the input field has no content, so there should be enough hint for the label, so I don't want the tooltip to be displayed. But if they enter a name that is already in use, I would only like to display the tooltip. I can tell if a name is being used in paper input by looking at the map while listening to onKeyUp. But then how can I disable the tip if it is missing?

If I set the style display to: none of the arrowheads and minus bodies of the empty tip are displayed.

I'm just looking for a way to disable / enable CoreTooltip.

+3


source to share


2 answers


I couldn't find a way to use the api component. This seems to work:

First select CoreTooltip in code. To enable this you can add an id to the 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>


Then use Gunther's approach to grab internals with a querySelector with / deep / (see also How to programmatically clear a PaperInput and emit a floating label on an input string )

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

The trick is to know how to select only the hint tip and then hide it. Not sure if the best way to determine this is by trying to examine the core-tooltip code or drill into the #shadowDom instances in the ToolTip inspector to find the actual element you are trying to hide. In this case, the actual tooltip div has a tooltip id for the query. Not sure if this is a good strategy in terms of encapsulation.

+3


source


CSS solution.

I have bound it to an attribute invalid

for demonstration purposes only.



<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;
}
+3


source






More articles:


All Articles