@@ -74,7 +74,8 @@ class ReactTooltip extends React.Component {
74
74
bodyMode : PropTypes . bool ,
75
75
possibleCustomEvents : PropTypes . string ,
76
76
possibleCustomEventsOff : PropTypes . string ,
77
- clickable : PropTypes . bool
77
+ clickable : PropTypes . bool ,
78
+ disableInternalStyle : PropTypes . bool
78
79
} ;
79
80
}
80
81
@@ -152,12 +153,15 @@ class ReactTooltip extends React.Component {
152
153
}
153
154
154
155
componentDidMount ( ) {
155
- const { insecure, resizeHide } = this . props ;
156
+ const { insecure, resizeHide, disableInternalStyle } = this . props ;
156
157
this . mount = true ;
157
158
158
159
this . bindListener ( ) ; // Bind listener for tooltip
159
160
this . bindWindowEvents ( resizeHide ) ; // Bind global event for static method
160
- this . injectStyles ( ) ; // Inject styles for each DOM root having tooltip.
161
+
162
+ if ( ! disableInternalStyle ) {
163
+ this . injectStyles ( ) ; // Inject styles for each DOM root having tooltip.
164
+ }
161
165
}
162
166
163
167
static getDerivedStateFromProps ( nextProps , prevState ) {
@@ -798,14 +802,16 @@ class ReactTooltip extends React.Component {
798
802
const { extraClass, html, ariaProps, disable, uuid } = this . state ;
799
803
const content = this . getTooltipContent ( ) ;
800
804
const isEmptyTip = this . isEmptyTip ( content ) ;
801
- const style = generateTooltipStyle (
802
- this . state . uuid ,
803
- this . state . customColors ,
804
- this . state . type ,
805
- this . state . border ,
806
- this . state . padding ,
807
- this . state . customRadius
808
- ) ;
805
+ const style = this . props . disableInternalStyle
806
+ ? ''
807
+ : generateTooltipStyle (
808
+ this . state . uuid ,
809
+ this . state . customColors ,
810
+ this . state . type ,
811
+ this . state . border ,
812
+ this . state . padding ,
813
+ this . state . customRadius
814
+ ) ;
809
815
810
816
const tooltipClass =
811
817
'__react_component_tooltip' +
@@ -828,7 +834,9 @@ class ReactTooltip extends React.Component {
828
834
. join ( ' ' ) ;
829
835
830
836
if ( html ) {
831
- const htmlContent = `${ content } \n<style aria-hidden="true">${ style } </style>` ;
837
+ const htmlContent = `${ content } ${
838
+ style ? `\n<style aria-hidden="true">${ style } </style>` : ''
839
+ } `;
832
840
833
841
return (
834
842
< Wrapper
@@ -849,10 +857,12 @@ class ReactTooltip extends React.Component {
849
857
ref = { ( ref ) => ( this . tooltipRef = ref ) }
850
858
data-id = "tooltip"
851
859
>
852
- < style
853
- dangerouslySetInnerHTML = { { __html : style } }
854
- aria-hidden = "true"
855
- />
860
+ { style && (
861
+ < style
862
+ dangerouslySetInnerHTML = { { __html : style } }
863
+ aria-hidden = "true"
864
+ />
865
+ ) }
856
866
{ content }
857
867
</ Wrapper >
858
868
) ;
0 commit comments