Github issue #372, [Pagination] - keep fixed pagination option displaying 5 pages.

-- Added new lighter theme for the tooltips to align with paginator tooltip designs
-- Fixed pointer style for the case where tooltip is shown in the right of the target

Author: Vikas Agarwal

components/Tooltip/Tooltip.jsx

@@ -36,6 +36,7 @@ class Tooltip extends Component {
     ttContainer.style.padding = tooltipPadding + 'px'
     tooltipPointer.style.width = pointerWidth + 'px'
     tooltipPointer.style.height = pointerWidth + 'px'
+    tooltipPointer.classList.remove('upward-pointer', 'downward-pointer', 'leftward-pointer')
     const ttBorderRadius = getComputedStyle(ttContainer).getPropertyValue('border-top-left-radius').replace(/[^-\d\.]/g, '')
     //if right side of tooltip will fit above/below target on screen when centered to target
     if (targetRectCenterX + (tooltip.clientWidth / 2) + tooltipMargin < document.body.clientWidth) {
@@ -68,16 +69,19 @@ class Tooltip extends Component {
       if (targetRectCenterX < (tooltip.clientWidth / 2) + tooltipMargin && window.scrollY < (targetRectCenterY - (tooltip.clientHeight / 2)) && targetRect.right + tooltip.clientWidth + tooltipMargin + (pointerWidth/2) + pointerGap < document.body.clientWidth) {
         tooltip.style.left = parseInt(targetRectStyle.marginLeft) + targetRect.width + pointerGap + (pointerWidth/2) + 'px'
         tooltip.style.top = targetRect.height / 2 - (tooltip.clientHeight/2) + 'px'
-        tooltipPointer.style.top = pointerGap + pointerWidth /2 + 'px'
+        tooltipPointer.style.top = tooltipRect.height/2 - (pointerWidth / Math.sqrt(2)) + 'px'
         tooltipPointerLeft = - (pointerWidth/2) + 'px'
+        tooltipPointer.classList.add('leftward-pointer')
       } else {
         tooltip.style.top = targetRect.height + pointerGap + (pointerWidth/2) + 'px'
+        tooltipPointer.classList.add('upward-pointer')
         tooltipPointer.style.top = - pointerGap + 'px'
       }
     } else {
       tooltip.style.top =  - tooltip.clientHeight - pointerGap - (pointerWidth / Math.sqrt(2)) + 'px'
       tooltipPointer.style.bottom = - (pointerWidth/2) + 'px'
       tooltipPointer.style.top = 'auto'
+      tooltipPointer.classList.add('downward-pointer')
     }
     tooltipPointer.style.left = tooltipPointerLeft
 

components/Tooltip/Tooltip.scss

@@ -25,10 +25,8 @@
     }
 
     .tooltip-content-container {
-      background-color: $tc-gray-80;
-      color: #fff;
       width: 100%;
-      height: 100%;
+      overflow: hidden;
       padding: 15px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
@@ -38,32 +36,58 @@
         position: absolute;
         height: 10px;
         width: 10px;
-        background-color: $tc-gray-80;
         transform: rotate(45deg);
         bottom: -5px;
         left: calc(50% - 5px);
-        z-index:-1;
       }
 
       .tooltip-body {
-        // position: relative;
-        color: #fff;
         font-size: 14px;
         padding: 0;
         margin: 0;
-        // z-index:2;
       }
     }
   }
   //tooltip theme styling
   &.default {
     .tooltip-content-container {
+      background-color: $tc-gray-80;
+      color: #fff;
       //additional theme styling goes here
       .tooltip-pointer {
-
+        background-color: $tc-gray-80;
       }
       .tooltip-body {
+        color: #fff;
+      }
+    }
+  }
+  //tooltip light theme
+  &.light {
+    .tooltip-content-container {
+      background-color: $tc-white;
+      border: 1px solid $tc-gray-neutral-dark;
+      color: $tc-gray-80;
+      //additional theme styling goes here
+      .tooltip-pointer {
+        background-color: $tc-white;
+        border-style: solid;
+        border-color: $tc-gray-neutral-dark;
 
+        &.downward-pointer {
+          border-width: 0px 1px 1px 0px;
+        }
+
+        &.upward-pointer {
+          border-width: 1px 0px 0px 1px;
+        }
+
+        &.leftward-pointer {
+          border-width: 0px 0px 1px 1px;
+        }
+      }
+      .tooltip-body {
+        color: $tc-gray-80;
       }
     }
   }

components/Tooltip/TooltipExamples.jsx

@@ -5,7 +5,7 @@ require('./TooltipExamples.scss')
 
 const TooltipExamples = () => (
   <div className="tooltip-examples-container">
-    <Tooltip>
+    <Tooltip theme="light">
       <div className="tooltip-target" id="tooltip-1">Default Mouseover Tooltip Example</div>
       <div className="tooltip-body">
         <p>This is a tooltip using the default theme.</p>