Merge pull request #1036 from carloslancha/issue-1022-tooltip-hidden

Hide Tooltip correctly | Fixes #1022
liferay · Jul 9, 2018 · 3d9e4e2 · 3d9e4e2
2 parents 7e6b6a2 + 9c798ce
commit 3d9e4e2
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 9 deletions.
diff --git a/packages/clay-isomorphic/fixtures/expected/ClayTooltip.render b/packages/clay-isomorphic/fixtures/expected/ClayTooltip.render
@@ -1 +1 @@
-<div class="tooltip fade clay-tooltip-bottom" data-onmouseenter="_handleMouseEnterTooltip" data-onmouseleave="_handleMouseLeave" hidden role="tooltip"><div class="arrow"></div><div class="tooltip-inner">null</div></div>
+<div class="tooltip fade clay-tooltip-bottom" data-onmouseenter="_handleMouseEnterTooltip" data-onmouseleave="_handleMouseLeave" role="tooltip"><div class="arrow"></div><div class="tooltip-inner">null</div></div>
diff --git a/packages/clay-tooltip/src/ClayTooltip.js b/packages/clay-tooltip/src/ClayTooltip.js
@@ -63,6 +63,10 @@ class ClayTooltip extends Component {
 	 */
 	attached() {
 		this.addListener('transitionend', this._handleTransitionEnd, true);
+
+		if (!this.visible) {
+			this.element.style.display = 'none';
+		}
 	}
 
 	/**

diff --git a/packages/clay-tooltip/src/ClayTooltip.soy b/packages/clay-tooltip/src/ClayTooltip.soy
@@ -30,13 +30,7 @@
 
 		data-onmouseenter="_handleMouseEnterTooltip"
 		data-onmouseleave="_handleMouseLeave"
-
-		{if not $visible}
-			{sp}hidden{sp}
-		{/if}
-
 		role="tooltip"
-
 	{/let}
 
 	<div {$tooltipAttributes}>

diff --git a/packages/clay-tooltip/src/__tests__/__snapshots__/ClayTooltip.js.snap b/packages/clay-tooltip/src/__tests__/__snapshots__/ClayTooltip.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClayTooltip should allow setting selectors 1`] = `
-<div class="tooltip fade clay-tooltip-bottom" hidden="" role="tooltip">
+<div class="tooltip fade clay-tooltip-bottom" role="tooltip" style="display: none;">
   <div class="arrow"></div>
   <div class="tooltip-inner"></div>
 </div>
 `;
 
 exports[`ClayTooltip should create a tooltip 1`] = `
-<div class="tooltip fade clay-tooltip-bottom" hidden="" role="tooltip">
+<div class="tooltip fade clay-tooltip-bottom" role="tooltip" style="display: none;">
   <div class="arrow"></div>
   <div class="tooltip-inner"></div>
 </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="tooltip fade clay-tooltip-bottom" data-onmouseenter="_handleMouseEnterTooltip" data-onmouseleave="_handleMouseLeave" hidden role="tooltip"><div class="arrow"></div><div class="tooltip-inner">null</div></div>
		<div class="tooltip fade clay-tooltip-bottom" data-onmouseenter="_handleMouseEnterTooltip" data-onmouseleave="_handleMouseLeave" role="tooltip"><div class="arrow"></div><div class="tooltip-inner">null</div></div>