Skip to content
This repository was archived by the owner on Mar 1, 2024. It is now read-only.

Commit 90dca54

Browse files
committed
feat(tooltip): add new tooltip component
adds new tooltip component to tabler-react
1 parent cc298e4 commit 90dca54

File tree

3 files changed

+86
-1
lines changed

3 files changed

+86
-1
lines changed
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// @flow
2+
3+
import * as React from "react";
4+
import cn from "classnames";
5+
import { Manager, Placement, Reference, Popper } from "react-popper";
6+
import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper";
7+
8+
type Props = {|
9+
+content: string,
10+
+children?: React.Node,
11+
+className?: string,
12+
+placement?: Placement,
13+
|};
14+
15+
type State = {
16+
isShown: boolean,
17+
};
18+
19+
class Tooltip extends React.Component<Props, State> {
20+
state = { isShown: false };
21+
22+
_handleTriggerOnMouseEnter = (e: SyntheticMouseEvent<HTMLElement>) => {
23+
e.preventDefault();
24+
this.setState({ isShown: true });
25+
};
26+
27+
_handleTriggerOnMouseLeave = (e: SyntheticMouseEvent<HTMLElement>) => {
28+
e.preventDefault();
29+
this.setState({ isShown: false });
30+
};
31+
32+
render(): React.Node {
33+
const { className, children, placement, content } = this.props;
34+
35+
const classes = cn(
36+
"tooltip",
37+
placement ? "bs-tooltip-" + placement : null,
38+
{
39+
show: this.state.isShown,
40+
},
41+
className
42+
);
43+
44+
return (
45+
<Manager>
46+
<Reference>
47+
{({ ref }: ReferenceChildrenProps) => (
48+
<div
49+
ref={ref}
50+
onMouseEnter={this._handleTriggerOnMouseEnter}
51+
onMouseLeave={this._handleTriggerOnMouseLeave}
52+
>
53+
{children}
54+
</div>
55+
)}
56+
</Reference>
57+
{this.state.isShown ? (
58+
<Popper placement={placement} eventsEnabled={true}>
59+
{({ ref, style, placement }: PopperChildrenProps) => {
60+
return (
61+
<div
62+
className={classes}
63+
data-placement={placement}
64+
style={style}
65+
ref={ref}
66+
>
67+
{/* <div className="arrow tbr-arrow" /> */}
68+
<div className="tooltip-inner">{content}</div>
69+
</div>
70+
);
71+
}}
72+
</Popper>
73+
) : null}
74+
</Manager>
75+
);
76+
}
77+
}
78+
79+
export default Tooltip;

src/components/Tooltip/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @flow
2+
3+
import Tooltip from "./Tooltip.react";
4+
5+
export { Tooltip as default };

src/components/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export { default as GalleryCard } from "./GalleryCard";
1515
export { default as Grid } from "./Grid";
1616
export { default as Header } from "./Header";
1717
export { default as Icon } from "./Icon";
18-
export { default as Loader } from "./Loader";
1918
export { default as List } from "./List";
19+
export { default as Loader } from "./Loader";
2020
export { default as Media } from "./Media";
2121
export { default as Nav } from "./Nav";
2222
export { default as Notification } from "./Notification";
@@ -36,3 +36,4 @@ export { default as Text } from "./Text";
3636
export { default as TabbedCard } from "./TabbedCard";
3737
export { Tab, Tabs, TabbedContainer, TabbedHeader } from "./Tabs";
3838
export { default as Timeline } from "./Timeline";
39+
export { default as Tooltip } from "./Tooltip";

0 commit comments

Comments
 (0)