css3 - polymer core-tooltip: transitioning visiblitity -

css3 - polymer core-tooltip: transitioning visiblitity -

i want delay display of tooltips on hover. seem able delay them disappearing want exact opposite. want them take 1s before display on hover disappear when no longer on hover

the next has exact opposite effect want

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

creating delayed css3 transitions element requires transition-delay property.

live demo demonstrates tooltip shown after 1 sec delay. source below in case link isn't saved.

<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 tooltip" id="core_tooltip" class="special"> <span id="span">delay second</span> </core-tooltip> </template> <script> polymer({ }); </script> </polymer-element>

css3 css-transitions polymer