Skip to content

Commit 2eec877

Browse files
danny-does-stuffdanny-does-stuff
committed
feat: add borderClass prop to allow a custom border class
Allow overriding the default border class name "border" with a custom class name
1 parent 8d260dc commit 2eec877

File tree

5 files changed

+44
-15
lines changed

5 files changed

+44
-15
lines changed

Diff for: ‎README.md

+8-5
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,13 @@ Notes:
8484
| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |
8585
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline |
8686
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |
87-
| 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.<br/>When using JSX, see [this note](#jsx-note) below. |
87+
| 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.<br/>When using JSX, see [this note](#jsx-note) below. |
8888
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` |
8989
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` |
9090
| delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |
9191
| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |
9292
| border | data-border | Bool | true, false | Add one pixel white border |
93+
| borderClass | data-border-class | String | e.g. custom-border-class | A custom class name to use for the border - enabled by the `border` prop |
9394
| textColor | data-text-color | String | e.g. red | Popup text color |
9495
| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |
9596
| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |
@@ -109,8 +110,10 @@ Notes:
109110
The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
110111

111112
#### JSX Note
113+
112114
You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. You still need to set `data-html={true}`.
113115
**Example:**
116+
114117
```jsx
115118
import ReactDOMServer from 'react-dom/server';
116119
[...]
@@ -186,22 +189,22 @@ Same for empty children, if you don't want show the tooltip when the children is
186189

187190
### 3. Tooltip not binding to dynamic content
188191

189-
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
190-
on new dynamic content, the tooltip will not register its event listener.
192+
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
193+
on new dynamic content, the tooltip will not register its event listener.
191194

192195
For example, you render a generic tooltip in the root of your app, then load a list of content async.
193196
Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
194197
Since the tooltip has already scanned for data-tip these new elements will not trigger.
195198

196-
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
199+
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
197200
to allow event wireup.
198201

199202
#### Example
200203

201204
```jsx
202205
<app>
203206
<ReactTooltip id="foo" />
204-
<list/>
207+
<list />
205208
</app>
206209
```
207210

Diff for: ‎example/src/App.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ export default class App extends Component {
316316
<div className="side">
317317
<a
318318
data-for="custom-color"
319-
data-tip="That is one weird arrow (and a border)!"
319+
data-tip="That is one weird arrow (and a border with custom class name)!"
320320
>
321321
V(^-^)V
322322
</a>
@@ -325,6 +325,7 @@ export default class App extends Component {
325325
className="custom-color"
326326
place="right"
327327
border
328+
borderClass="custom-border-class"
328329
textColor="#5F4B8BFF"
329330
backgroundColor="#E69A8DFF"
330331
borderColor="darkgreen"

Diff for: ‎react-tooltip.d.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export interface TooltipProps {
3030
multiline?: boolean;
3131
// Add 1px white border
3232
border?: boolean;
33+
// A custom class name to use for the border
34+
borderClass?: string;
3335
// Popup text color
3436
textColor?: string;
3537
// Popup background color
@@ -74,7 +76,7 @@ export interface TooltipProps {
7476
afterHide?: VoidFunc;
7577
// Callback to override the tooltip position
7678
overridePosition?: (
77-
position: { left: number; top: number; },
79+
position: { left: number; top: number },
7880
currentEvent: Event,
7981
currentTarget: EventTarget,
8082
// node is the ref argument, and the wrapper
@@ -83,8 +85,8 @@ export interface TooltipProps {
8385
place: Place,
8486
desiredPlace: Place,
8587
effect: Effect,
86-
offset: Offset,
87-
) => ({ left: number; top: number; });
88+
offset: Offset
89+
) => { left: number; top: number };
8890
// Manually disable the tooltip behavior
8991
disable?: boolean;
9092
// Hide the tooltip when scrolling;
@@ -94,7 +96,7 @@ export interface TooltipProps {
9496
// default = true
9597
resizeHide?: boolean;
9698
// The tooltip parent component;
97-
// default = 'div'
99+
// default = 'div'
98100
wrapper?: 'div' | 'span';
99101
// Listen to body events vs. individual events
100102
bodyMode?: boolean;
@@ -111,7 +113,7 @@ export interface TooltipProps {
111113
// ReactTooltip component is the default export
112114
export default class ReactTooltip extends React.Component<TooltipProps> {
113115
// static methods
114-
static show: (target: Element) => {};
115-
static hide: (target?: Element) => {};
116-
static rebuild: () => {};
116+
static show: (target: Element) => {};
117+
static hide: (target?: Element) => {};
118+
static rebuild: () => {};
117119
}

Diff for: ‎src/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class ReactTooltip extends React.Component {
4444
padding: PropTypes.string,
4545
multiline: PropTypes.bool,
4646
border: PropTypes.bool,
47+
borderClass: PropTypes.string,
4748
textColor: PropTypes.string,
4849
backgroundColor: PropTypes.string,
4950
borderColor: PropTypes.string,
@@ -97,6 +98,7 @@ class ReactTooltip extends React.Component {
9798
effect: props.effect || 'float', // float or fixed
9899
show: false,
99100
border: false,
101+
borderClass: 'border',
100102
customColors: {},
101103
offset: {},
102104
padding: props.padding,
@@ -501,6 +503,10 @@ class ReactTooltip extends React.Component {
501503
(target.getAttribute('data-border')
502504
? target.getAttribute('data-border') === 'true'
503505
: self.props.border) || false,
506+
borderClass:
507+
target.getAttribute('data-border-class') ||
508+
self.props.borderClass ||
509+
'border',
504510
extraClass:
505511
target.getAttribute('data-class') ||
506512
self.props.class ||
@@ -771,7 +777,7 @@ class ReactTooltip extends React.Component {
771777
'__react_component_tooltip' +
772778
` ${this.state.uuid}` +
773779
(this.state.show && !disable && !isEmptyTip ? ' show' : '') +
774-
(this.state.border ? ' border' : '') +
780+
(this.state.border ? ' ' + this.state.borderClass : '') +
775781
` place-${this.state.place}` + // top, bottom, left, right
776782
` type-${this.hasCustomColors() ? 'custom' : this.state.type}` + // dark, success, warning, error, info, light, custom
777783
(this.props.delayUpdate ? ' allow_hover' : '') +

Diff for: ‎test/index.spec.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,21 @@ describe('Tooltip', () => {
170170
arrowColor: '#222',
171171
borderColor: 'blue'
172172
}
173+
],
174+
[
175+
{
176+
border: true,
177+
borderClass: 'custom-border-class',
178+
borderColor: '#414141'
179+
},
180+
{
181+
borderColor: '#414141',
182+
borderClass: 'custom-border-class',
183+
popupType: 'type-custom',
184+
textColor: '#fff',
185+
background: '#222',
186+
arrowColor: '#222'
187+
}
173188
]
174189
]).it('Popup color generation - show', (props, res) => {
175190
render(
@@ -184,10 +199,12 @@ describe('Tooltip', () => {
184199

185200
const tooltip = document.getElementById('colorSpec');
186201

202+
const expectedBorderClass = res.borderClass || 'border';
203+
187204
expect(tooltip.className).to.match(
188205
new RegExp(
189206
'__react_component_tooltip [a-zA-Z0-9-]+ show' +
190-
(props.border ? ' border ' : ' ') +
207+
(props.border ? ` ${expectedBorderClass} ` : ' ') +
191208
'place-top ' +
192209
res.popupType,
193210
'i'

0 commit comments

Comments
 (0)