Merge pull request #603 from pvcresin/add_padding_props

feat(component): adding "padding" property to customize padding style

Author: aronhelser

README.md

@@ -81,6 +81,7 @@ Notes:
 | globalEventOff   |                       | String        | e.g. click                                                                                                                            | global event to hide tooltip (global only)                                                                                                                                                          |
 | isCapture        | data-iscapture        | Bool          | true, false                                                                                                                           | when set to true, custom event's propagation mode will be capture                                                                                                                                   |
 | offset           | data-offset           | Object        | top, right, bottom, left                                                                                                              | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global                                                                                                  |
+| padding          | data-padding          | String        | e.g. `8px 21px`                                                                                                                       | Popup padding style                                                                                                                                                                                 |
 | multiline        | data-multiline        | Bool          | true, false                                                                                                                           | support `<br>`, `<br />` to make multiline                                                                                                                                                          |
 | className        | data-class            | String        |                                                                                                                                       | extra custom class, can use !important to overwrite react-tooltip's default class                                                                                                                   |
 | html             | data-html             | Bool          | true, false                                                                                                                           | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.                                                         |

src/decorators/defaultStyles.js

@@ -43,3 +43,5 @@ const defaultColors = {
 export function getDefaultPopupColors(type) {
   return defaultColors[type] ? { ...defaultColors[type] } : undefined;
 }
+
+export const DEFAULT_PADDING = '8px 21px';

src/decorators/styler.js

@@ -1,16 +1,26 @@
-import { getDefaultPopupColors } from './defaultStyles';
+import { getDefaultPopupColors, DEFAULT_PADDING } from './defaultStyles';
 
 /**
  * Generates the specific tooltip style for use on render.
  */
-export function generateTooltipStyle(uuid, customColors, type, hasBorder) {
-  return generateStyle(uuid, getPopupColors(customColors, type, hasBorder));
+export function generateTooltipStyle(
+  uuid,
+  customColors,
+  type,
+  hasBorder,
+  padding
+) {
+  return generateStyle(
+    uuid,
+    getPopupColors(customColors, type, hasBorder),
+    padding
+  );
 }
 
 /**
  * Generates the tooltip style rules based on the element-specified "data-type" property.
  */
-function generateStyle(uuid, colors) {
+function generateStyle(uuid, colors, padding = DEFAULT_PADDING) {
   const textColor = colors.text;
   const backgroundColor = colors.background;
   const borderColor = colors.border;
@@ -21,6 +31,7 @@ function generateStyle(uuid, colors) {
 	    color: ${textColor};
 	    background: ${backgroundColor};
 	    border: 1px solid ${borderColor};
+	    padding: ${padding};
   	}
 
   	.${uuid}.place-top {

src/index.js

@@ -41,6 +41,7 @@ class ReactTooltip extends React.Component {
       type: PropTypes.string,
       effect: PropTypes.string,
       offset: PropTypes.object,
+      padding: PropTypes.string,
       multiline: PropTypes.bool,
       border: PropTypes.bool,
       textColor: PropTypes.string,
@@ -98,6 +99,7 @@ class ReactTooltip extends React.Component {
       border: false,
       customColors: {},
       offset: {},
+      padding: props.padding,
       extraClass: '',
       html: false,
       delayHide: 0,
@@ -482,6 +484,7 @@ class ReactTooltip extends React.Component {
           },
           effect: effect,
           offset: offset,
+          padding: target.getAttribute('data-padding') || self.props.padding,
           html:
             (target.getAttribute('data-html')
               ? target.getAttribute('data-html') === 'true'
@@ -760,7 +763,8 @@ class ReactTooltip extends React.Component {
       this.state.uuid,
       this.state.customColors,
       this.state.type,
-      this.state.border
+      this.state.border,
+      this.state.padding
     );
 
     const tooltipClass =

src/index.scss

@@ -4,7 +4,6 @@
   font-size: 13px;
   left: -999em;
   opacity: 0;
-  padding: 8px 21px;
   position: fixed;
   pointer-events: none;
   transition: opacity 0.3s ease-out;