Cannot force tooltip to hide

[jonaskello]

I would like to force the tooltip to hide, reverse of what the "show" property does.

My scenario is that I have a paper-dropdown that opens up over a tooltip. The dropdown does not cover the tooltip so it shows through the dropdown. So I want some way of hiding the tooltip until the dropdown closes.

[jonaskello]

Actually it would be even better if there was some way to "close" the tooltip, as I don't want it to display again when the dropdown closes (if the mouse is not over).

[ebidel]

Have you tried the disabled attribute? Toggling it at the appropriate times? Or you could also use visibility: hidden or other CSS to style the tooltip.

[jonaskello]

Disabled was actually the first thing I tried :-). The problem is that the tooltip is nesting some other elements that also have tooltips. It's hard to show a simple example as it is part of a larger project. I did a quick cut down of the markup just to show something right now (will try to make a runnable example if I get some more time):

    <core-tooltip id="tooltip" label="{{selectedValueItem.tooltip}}">
      <div layout horizontal center flex>
        <template if="{{selectedValueItem.imageSrc != null}}">
          <img _src="{{selectedValueItem.imageSrc}}" height="35">
        </template>
        <div>
          <paper-dropdown-menu id="menu" label="Select a value" opened="{{dropdownOpen}}">
            <paper-dropdown class="dropdown" transition="">
              <core-menu id="selector" class="menu" on-core-select="{{itemSelected}}">
                <content></content>
              </core-menu>
            </paper-dropdown>
          </paper-dropdown-menu>
        </div>
      </div>
    </core-tooltip>

The items that go inside the <content> look something like this:

    <core-item style="color: {{color}}">
      <core-tooltip label="{{tooltip}}">
        <div layout horizontal center>
          <template if="{{imageSrc != null}}">
            <img _src="{{imageSrc}}" height="60">
          </template>
          <content></content>
        </div>
      </core-tooltip>
    </core-item>

Basically I am trying to accomplish a dropdown with an image and a tooltip on each item. When an item is selected the image and tooltip of the selected item should be shown as the selected value (along with the text/label). Since paper-dropdown-menu only shows the text and not the html content of the item I need to reproduce the tooltip and the image on the paper-dropdown-menu.

If I set disabled on #tooltip, then all of it's children are also disabled, so I cannot open the dropdown anymore.

I think it would be useful it the tooltip was not so tightly coupled to its children, and instead we could control the target. I found https://github.com/x-tag/tooltip which seems to have a lot more options but it seems to have been abandoned (no commit in a year).

[jonaskello]

This example shows the problem. The tooltip of the menu is staying open while the drop-down is shown:

http://jsbin.com/paqodewawi/1/edit?html,output

[lucyhe]

I think you can write an observer for the "opened" property on the paper-dropdown-menu (e.g. observe: { '$.myDropdown.opened' : 'dropdownToggled' }) and in the dropdownToggled function, set $.outerTooltip.disabled to true or false as appropriate.