Tooltip close handling for auto scenario (#112)

- Close on click outside - Fixed text wrapping in grid
MediaMath · Aug 10, 2016 · 8897159 · 8897159
1 parent d464aa4
commit 8897159
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/strand-tooltip/strand-tooltip.html b/src/strand-tooltip/strand-tooltip.html
@@ -20,7 +20,7 @@
 		<div id="container" class$="{{_updateClass(auto)}}" style$="{{_containerStyle}}">
 			<content select="label"></content>
 			<template is="dom-if" if="{{!auto}}">
-				<strand-icon type="delete" class="close-icon" width="8" height="8"></strand-icon>
+				<strand-icon type="delete" class="close-icon" width="8" height="8" on-click="_closeIconHandler"></strand-icon>
 			</template>
 		</div>
 	</template>

diff --git a/src/strand-tooltip/strand-tooltip.js b/src/strand-tooltip/strand-tooltip.js
@@ -29,7 +29,7 @@
 			},
 			stackType:{
 				type: String,
-				value: "tooltip"
+				value: 'tooltip'
 			},
 			tipWidth: {
 				type: Number,
@@ -85,9 +85,14 @@
 			return this.classBlock(o);
 		},
 
+		_closeIconHandler: function(e) {
+			this.close();
+		},
+
 		_closeFilter: function(instance, e, original) {
-			var closeIcon = instance.$$('.close-icon');
-			if(e.path.indexOf(closeIcon) > -1){
+			if(e.path.indexOf(instance) > -1 || e.path.indexOf(instance._target) > -1){
+				original.stopImmediatePropagation();
+			} else {
 				instance.close();
 			}
 		}

diff --git a/src/strand-tooltip/strand-tooltip.scss b/src/strand-tooltip/strand-tooltip.scss
@@ -35,6 +35,11 @@ $bg-color: $color-A1;
 	border-radius: 4px 4px 4px 4px;
 	box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.18);
 
+
+	& > ::content label {
+		white-space: normal !important;
+	}
+
 	&.auto {
 		padding: 16px;