Merge pull request #47 from AndreiCalazans/triangle

feat: enable tooltip pointer customization
AndreiCalazans · Nov 15, 2019 · 4801f15 · 4801f15
2 parents c1c54cb + 90b50a0
commit 4801f15
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ import Tooltip from 'rn-tooltip';
 * [`onClose`](#onClose)
 * [`onOpen`](#onOpen)
 * [`pointerColor`](#pointerColor)
+* [`pointerStyle`](#pointerStyle)
 * [`popover`](#popover)
 * [`actionType`](#actionType)
 * [`width`](#width)
@@ -130,6 +131,14 @@ Color of tooltip pointer, it defaults to the
 
 ---
 
+### `pointerStyle`
+
+Passes style object to tooltip pointer view
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
 ### `popover`
 
 Component to be rendered as the display container.
@@ -145,8 +154,8 @@ Component to be rendered as the display container.
 Flag to determine how the tooltip reacts to presses.
 
 |  Type   | Default |
-| :-----: | press |
-| Enum |  none or  press or longPress  |
+| :-----: | :-----: |
+| press or none or longPress | press |
 
 ---
 

diff --git a/index.d.ts b/index.d.ts
@@ -8,6 +8,7 @@ type Props = {
   width?: number | string,
   containerStyle?: StyleProp<ViewStyle>;
   pointerColor?: string,
+  pointerStyle?: StyleProp<ViewStyle>,
   onClose?: () => void,
   onOpen?: () => void,
   withOverlay?: boolean,

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -30,6 +30,7 @@ type Props = {
   width: number | string,
   containerStyle: any,
   pointerColor: string,
+  pointerStyle: {},
   onClose: () => void,
   onOpen: () => void,
   withOverlay: boolean,
@@ -132,7 +133,7 @@ class Tooltip extends React.Component<Props, State> {
 
   renderPointer = tooltipY => {
     const { yOffset, xOffset, elementHeight, elementWidth } = this.state;
-    const { backgroundColor, pointerColor } = this.props;
+    const { backgroundColor, pointerColor, pointerStyle } = this.props;
     const pastMiddleLine = yOffset > tooltipY;
 
     return (
@@ -144,7 +145,10 @@ class Tooltip extends React.Component<Props, State> {
         }}
       >
         <Triangle
-          style={{ borderBottomColor: pointerColor || backgroundColor }}
+          style={{
+            borderBottomColor: pointerColor || backgroundColor,
+            ...pointerStyle,
+          }}
           isDown={pastMiddleLine}
         />
       </View>
@@ -234,6 +238,7 @@ Tooltip.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   containerStyle: ViewPropTypes.style,
   pointerColor: PropTypes.string,
+  pointerStyle: PropTypes.object,
   onClose: PropTypes.func,
   onOpen: PropTypes.func,
   withOverlay: PropTypes.bool,
@@ -253,6 +258,7 @@ Tooltip.defaultProps = {
   height: 40,
   width: 150,
   containerStyle: {},
+  pointerStyle: {},
   backgroundColor: '#617080',
   onClose: () => {},
   onOpen: () => {},