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

CodeForked · May 29, 2020 · 9ae765a · 9ae765a
1 parent d696fe5
commit 9ae765a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,7 @@ Check example: [React-tooltip Test](https://react-tooltip.netlify.com/)
 | 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.                                                         |

diff --git a/src/decorators/defaultStyles.js b/src/decorators/defaultStyles.js
@@ -13,3 +13,5 @@ const defaultColors = {
 export function getDefaultPopupColors (type) {
 	return defaultColors[type] ? { ...defaultColors[type] } : undefined;
 }
+
+export const DEFAULT_PADDING = "8px 21px";
diff --git a/src/decorators/styler.js b/src/decorators/styler.js
@@ -1,16 +1,16 @@
-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 +21,7 @@ function generateStyle(uuid, colors) {
 	    color: ${textColor};
 	    background: ${backgroundColor};
 	    border: 1px solid ${borderColor};
+      padding: ${padding};
   	}
 
   	.${uuid}.place-top {

diff --git a/src/index.js b/src/index.js
@@ -38,6 +38,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,
@@ -95,6 +96,7 @@ class ReactTooltip extends React.Component {
       border: false,
       customColors: {},
       offset: {},
+      padding: props.padding,
       extraClass: "",
       html: false,
       delayHide: 0,
@@ -426,6 +428,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" : self.props.html) ||
             false,
           delayShow: target.getAttribute("data-delay-show") ||
@@ -674,7 +677,13 @@ class ReactTooltip extends React.Component {
     const { extraClass, html, ariaProps, disable } = this.state;
     const content = this.getTooltipContent();
     const isEmptyTip = this.isEmptyTip(content);
-    const style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border);
+    const style = generateTooltipStyle(
+      this.state.uuid,
+      this.state.customColors,
+      this.state.type,
+      this.state.border,
+      this.state.padding
+    );
 
     const tooltipClass =
       "__react_component_tooltip" +

diff --git a/src/index.scss b/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;