diff --git a/README.md b/README.md index 1512166d4..93647bfa8 100755 --- a/README.md +++ b/README.md @@ -61,39 +61,40 @@ Notes: - The option you set on `` component will be implemented on every tooltip in a same page: `` - The option you set on a specific element, for example: `` will only affect this specific tooltip -| Global | Specific | Type | Values | Description | -| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order | -| type | data-type | String | dark, success, warning, error, info, light | theme | -| effect | data-effect | String | float, solid | behaviour of tooltip | -| event | data-event | String | e.g. click | custom event to trigger tooltip | -| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) | -| 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?: number, right?: number, bottom?: number, left?: number } | `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 `
`, `
` 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 | `

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. | -| delayHide | data-delay-hide | Number | | `

` or `` | -| delayShow | data-delay-show | Number | | `

` or `` | -| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target | -| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) | -| border | data-border | Bool | true, false | Add one pixel white border | -| borderClass | data-border-class | String | e.g. custom-border-class | A custom class name to use for the border - enabled by the `border` prop | -| textColor | data-text-color | String | e.g. red | Popup text color | -| backgroundColor | data-background-color | String | e.g. yellow | Popup background color | -| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value | -| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value | -| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically | -| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show | -| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide | -| overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one | -| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false | -| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true | -| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true | -| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div | -| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false | +| Global | Specific | Type | Values | Description | +| :------------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order | +| type | data-type | String | dark, success, warning, error, info, light | theme | +| effect | data-effect | String | float, solid | behaviour of tooltip | +| event | data-event | String | e.g. click | custom event to trigger tooltip | +| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) | +| 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?: number, right?: number, bottom?: number, left?: number } | `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 `
`, `
` 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 | `

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. | +| delayHide | data-delay-hide | Number | | `

` or `` | +| delayShow | data-delay-show | Number | | `

` or `` | +| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target | +| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) | +| border | data-border | Bool | true, false | Add one pixel white border | +| borderClass | data-border-class | String | e.g. custom-border-class | A custom class name to use for the border - enabled by the `border` prop | +| textColor | data-text-color | String | e.g. red | Popup text color | +| backgroundColor | data-background-color | String | e.g. yellow | Popup background color | +| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value | +| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value | +| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically | +| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show | +| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide | +| overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one | +| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false | +| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true | +| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true | +| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div | +| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false | +| disableInternalStyle | null | Bool | true, false | Disable internal styles to let custom styling of the tooltip being added | ### Security Note diff --git a/react-tooltip.d.ts b/react-tooltip.d.ts index 7e6c1a89c..f9d45bac8 100644 --- a/react-tooltip.d.ts +++ b/react-tooltip.d.ts @@ -110,6 +110,8 @@ export interface TooltipProps { role?: string; // Padding attribute padding?: string; + // Set internal style as optional + disableInternalStyle?: boolean; } // ReactTooltip component is the default export diff --git a/src/index.js b/src/index.js index 5e0ccc0e5..b983b400d 100755 --- a/src/index.js +++ b/src/index.js @@ -74,7 +74,8 @@ class ReactTooltip extends React.Component { bodyMode: PropTypes.bool, possibleCustomEvents: PropTypes.string, possibleCustomEventsOff: PropTypes.string, - clickable: PropTypes.bool + clickable: PropTypes.bool, + disableInternalStyle: PropTypes.bool }; } @@ -152,12 +153,15 @@ class ReactTooltip extends React.Component { } componentDidMount() { - const { insecure, resizeHide } = this.props; + const { insecure, resizeHide, disableInternalStyle } = this.props; this.mount = true; this.bindListener(); // Bind listener for tooltip this.bindWindowEvents(resizeHide); // Bind global event for static method - this.injectStyles(); // Inject styles for each DOM root having tooltip. + + if (!disableInternalStyle) { + this.injectStyles(); // Inject styles for each DOM root having tooltip. + } } static getDerivedStateFromProps(nextProps, prevState) { @@ -798,14 +802,16 @@ class ReactTooltip extends React.Component { const { extraClass, html, ariaProps, disable, uuid } = 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, - this.state.padding, - this.state.customRadius - ); + const style = this.props.disableInternalStyle + ? '' + : generateTooltipStyle( + this.state.uuid, + this.state.customColors, + this.state.type, + this.state.border, + this.state.padding, + this.state.customRadius + ); const tooltipClass = '__react_component_tooltip' + @@ -828,7 +834,9 @@ class ReactTooltip extends React.Component { .join(' '); if (html) { - const htmlContent = `${content}\n`; + const htmlContent = `${content}${ + style ? `\n` : '' + }`; return ( (this.tooltipRef = ref)} data-id="tooltip" > -