聚合物核心工具提示:过渡可见性

Question

我想在悬停时延迟显示工具提示。我似乎能够推迟它们的消失，但我想要的恰恰相反。我希望它们在悬停时显示前需要1秒，但在不再悬停时立即消失

下面的效果与我想要的完全相反

core-tooltip /deep/ * {
  transition: visibility 1s;
}

Answer 1

为元素创建延迟的CSS3转换需要转换延迟属性。

实时演示演示了一秒钟延迟后显示的工具提示。下面的源，以防链接未保存。

<link rel="import" href="../core-tooltip/core-tooltip.html">
<polymer-element name="my-element">
  <template>
    <style>    
      #span {
        border: 1px solid blue;
        padding: 10px;
        width: 280px;
        height: 130px;
      }
      #core_tooltip {
        width: 90px;
        height: 30px;
        left: 660px;
        top: 290px;
        position: absolute;
      }
      core-tooltip.special:hover::shadow .core-tooltip, core-tooltip.special:focus::shadow .core-tooltip {
        opacity: 1;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
        transform: translate3d(0px, 0px, 0px);
      }
    </style>
    <core-tooltip label="I'm a tooltip" id="core_tooltip" class="special">
      <span id="span">Delay for a second</span>
    </core-tooltip>
  </template>
  <script>
    Polymer({
    });
  </script>
</polymer-element>