Merge pull request #2 from benjaminliugang/MAX-29785

MAX-29785 Appt tooltip is not rendered properly in Show on Calendar mode with Two Weeks

HISTORY.md

@@ -1,3 +1,8 @@
+
+v1.3.4
+=================
+* Make the tooltip support specify verticalAlign value
+
 v1.3.3
 =================
 * Refine the shadow style

css/px-tooltip-styles.html

@@ -17,7 +17,7 @@
 <dom-module id="px-tooltip-styles">
 <template>
 <style>
-@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */#tooltip.left:after,#tooltip.right:after{box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000)}html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:var(--px-tooltip-z-index,1002);pointer-events:none}#tooltip.right:after,#tooltip.right:before{content:"";position:absolute;width:0;height:0;margin-left:0;top:calc(50% - 7px);left:1px;pointer-events:none;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:0 0;transform:rotate(45deg)}#tooltip.bottom:after,#tooltip.bottom:before,#tooltip.left:after,#tooltip.left:before{transform-origin:100% 0;content:"";position:absolute;width:0;height:0;margin-left:0;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);pointer-events:none}#tooltip.right:after{z-index:-10}#tooltip.right:before{z-index:10}#tooltip.left:after,#tooltip.left:before{top:calc(50% - 7px);right:1px;transform:rotate(-45deg)}#tooltip.left:after{z-index:-10}#tooltip.left:before{z-index:10}#tooltip.bottom:after,#tooltip.bottom:before{left:calc(50% - 2.5px);top:1px;transform:rotate(45deg)}#tooltip.bottom:after{z-index:10;box-shadow:-3px -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.bottom:before{z-index:-10}#tooltip.bottom{box-shadow:0 -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:after,#tooltip.top:before{content:"";position:absolute;width:0;height:0;margin-left:0;left:calc(50% - 8.5px);pointer-events:none;box-sizing:border-box;bottom:-1px;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:100% 0;transform:rotate(-45deg)}#tooltip.top:after{z-index:10;box-shadow:-3px 3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:before{z-index:-10}.tooltip-container{background-color:var(--px-tooltip-background-color,#fff);color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000);pointer-events:none;outline:0;padding:15px 20px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;word-wrap:break-word}.tooltip-container #message{line-height:1}
+@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */#tooltip.left:after,#tooltip.right:after{box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000)}html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:var(--px-tooltip-z-index,1002);pointer-events:none}#tooltip.right:after,#tooltip.right:before{content:"";position:absolute;width:0;height:0;margin-left:0;top:var(--carat-top);bottom:var(--carat-bottom);left:1px;pointer-events:none;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:0 0;transform:rotate(45deg)}#tooltip.bottom:after,#tooltip.bottom:before,#tooltip.left:after,#tooltip.left:before{transform-origin:100% 0;content:"";position:absolute;width:0;height:0;margin-left:0;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);pointer-events:none}#tooltip.right:after{z-index:-10}#tooltip.right:before{z-index:10}#tooltip.left:after,#tooltip.left:before{top:var(--carat-top);bottom:var(--carat-bottom);right:1px;transform:rotate(-45deg)}#tooltip.left:after{z-index:-10}#tooltip.left:before{z-index:10}#tooltip.bottom:after,#tooltip.bottom:before{left:calc(50% - 2.5px);top:1px;transform:rotate(45deg)}#tooltip.bottom:after{z-index:10;box-shadow:-3px -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.bottom:before{z-index:-10}#tooltip.bottom{box-shadow:0 -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:after,#tooltip.top:before{content:"";position:absolute;width:0;height:0;margin-left:0;left:calc(50% - 8.5px);pointer-events:none;box-sizing:border-box;bottom:-1px;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:100% 0;transform:rotate(-45deg)}#tooltip.top:after{z-index:10;box-shadow:-3px 3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:before{z-index:-10}.tooltip-container{background-color:var(--px-tooltip-background-color,#fff);color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000);pointer-events:none;outline:0;padding:15px 20px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;word-wrap:break-word}.tooltip-container #message{line-height:1}
 </style>
 </template>
 </dom-module>

demo/px-tooltip-demo.html

@@ -59,6 +59,7 @@
             id="tooltip"
             for="btn1"
             orientation="{{props.orientation.value}}"
+            vertical-align="{{props.verticalAlign.value}}"
             delay="{{props.delay.value}}"
             tooltip-message="{{props.tooltipMessage.value}}"
             tooltip-style="{{props.tooltipStyle.value}}">
@@ -103,13 +104,15 @@
             { configName: "Auto position",
               orientation: "auto",
               tooltipMessage: "This is a tooltip",
+              verticalAlign: "middle",
               delay: 50,
               siblingElement: "<button id='btn1'>Hover over me</button>"
             },
 
             { configName: "Bottom",
               orientation: "bottom",
               tooltipMessage: "This is a tooltip",
+              verticalAlign: "middle",
               delay: 50,
               siblingElement: "<button id='btn1'>Hover over me</button>"
             }
@@ -144,6 +147,14 @@
         inputPlaceholder: 'Tooltip message'
       },
 
+
+      verticalAlign: {
+        type: String,
+        defaultValue: 'middle',
+        inputType: 'dropdown',
+        inputChoices: ['top', 'middle', 'bottom']
+      },
+
       orientation: {
         type: String,
         inputType: 'dropdown',

package.json

@@ -2,7 +2,7 @@
   "name": "px-tooltip",
   "author": "General Electric",
   "description": "A Px component that provides a tooltip on invocation",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "private": false,
   "extName": null,
   "repository": {

px-tooltip.html

@@ -59,7 +59,12 @@
 -->
 <dom-module id="px-tooltip">
   <template>
-    <style include="px-tooltip-styles"></style>
+    <style include="px-tooltip-styles">
+      :host {
+        --carat-top: calc(50% - 7px);
+        --carat-bottom: undefined;
+      }
+    </style>
 
     <div id="tooltip" class$="[[_getClass(visible, _tooltipPos)]]">
       <div id="message"><span>{{ tooltipMessage }}</span> <slot></slot></div>
@@ -137,6 +142,16 @@
         reflect: true,
         value: 500
       },
+      /**
+        * The carat position relative to the 'for' element base on the orientation value(left & right)
+        * - 'top' to the elment's orientation side top position
+        * - 'middle' to the elment's orientation side middle position
+        * - 'buttom' to the elment's orientation side bottom position
+        */
+      verticalAlign: {
+        type: String,
+        value: 'middle'
+      },
       /**
        * The direction that the tooltip is displayed relative to the
        * 'for' element.
@@ -794,7 +809,25 @@
         this.style.left = this.mouseCoords[0] - this.thisRect.width - this._margin.top + "px";
         this.style.top = this.mouseCoords[1] - this.thisRect.height / 2 + "px";
       } else {
-        top = Math.round(this._getTargetPositionCenterOfTopBottom() - this.thisRect.height / 2) + "px";
+        if (this.verticalAlign === 'middle') {
+          top = Math.round(this._getTargetPositionCenterOfTopBottom() - this.thisRect.height / 2) + "px";
+          this.updateStyles({
+            '--carat-top': (Math.round(this.thisRect.height / 2) - 7.5) + "px",
+            '--carat-bottom': undefined,
+          });
+        } else if (this.verticalAlign === 'bottom') {
+          top = Math.round(this._getTargetPositionTop() - this.thisRect.height + this.targetRect.height) + "px";
+          this.updateStyles({
+            '--carat-top': undefined,
+            '--carat-bottom': Math.round(this.targetRect.height / 2) + "px"
+          });
+        } else {
+          top = Math.round(this._getTargetPositionTop()) + "px";
+          this.updateStyles({
+            '--carat-top': Math.round(this.targetRect.height / 2 - 7.5) + "px",
+            '--carat-bottom': undefined
+          });
+        }
 
         // position the tooltip itself
         this.style.left = this._getTargetPositionLeft() - this.thisRect.width - this._margin.left + "px";
@@ -813,7 +846,25 @@
         this.style.left = this.mouseCoords[0] + 10 + "px";
         this.style.top = this.mouseCoords[1] - this.thisRect.height / 2 + "px";
       } else {
-        top = Math.round(this._getTargetPositionCenterOfTopBottom() - this.thisRect.height / 2) + "px";
+        if (this.verticalAlign === 'middle') {
+          top = Math.round(this._getTargetPositionCenterOfTopBottom() - this.thisRect.height / 2) + "px";
+          this.updateStyles({
+            '--carat-top': (Math.round(this.thisRect.height / 2) - 7.5) + "px",
+            '--carat-bottom': undefined,
+          });
+        } else if (this.verticalAlign === 'bottom') {
+          top = Math.round(this._getTargetPositionTop() - this.thisRect.height + this.targetRect.height) + "px";
+          this.updateStyles({
+            '--carat-top': undefined,
+            '--carat-bottom': Math.round(this.targetRect.height / 2) + "px"
+          });
+        } else {
+          top = Math.round(this._getTargetPositionTop()) + "px";
+          this.updateStyles({
+            '--carat-top': Math.round(this.targetRect.height / 2 - 7.5) + "px",
+            '--carat-bottom': undefined
+          });
+        }
 
         // position the tooltip itself
         this.style.left = this._getTargetPositionRight() + this._margin.left + "px";

sass/px-tooltip.scss

@@ -46,7 +46,8 @@ $carat-size: 5px;
   width: 0;
   height: 0;
   margin-left: 0;
-  top: calc(50% - 7px);
+  top: var(--carat-top);
+  bottom: var(--carat-bottom);
   left: 1px;
   pointer-events: none;
   box-sizing: border-box;
@@ -72,7 +73,8 @@ $carat-size: 5px;
   width: 0;
   height: 0;
   margin-left: 0;
-  top: calc(50% - 7px);
+  top: var(--carat-top);
+  bottom: var(--carat-bottom);
   right: 1px;
   pointer-events: none;
   box-sizing: border-box;