Merge pull request #189 from MrJarv1s/tooltip

Tooltip
tabler · Jun 1, 2018 · c0f626e · c0f626e
2 parents 1b38879 + f52e8b1
commit c0f626e
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 14 deletions.
diff --git a/example/public/documentation/index.html b/example/public/documentation/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.495767ab.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.3b1ce0e9.js"></script></body></html>
diff --git a/src/components/Media/MediaBodySocial.react.js b/src/components/Media/MediaBodySocial.react.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import { List, Media } from "../../components";
+import { List, Media, Tooltip } from "../";
 
 type Props = {|
   +children?: React.Node,
@@ -32,39 +32,47 @@ function MediaBodySocial({
   if (facebook) {
     fbIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile">
-          <i className="fa fa-facebook" />
-        </a>
+        <Tooltip content="Facebook" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-facebook" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (twitter) {
     twitterIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="Twitter">
-          <i className="fa fa-twitter" />
-        </a>
+        <Tooltip content="Twitter" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-twitter" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (phone) {
     phoneIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="1234567890">
-          <i className="fa fa-phone" />
-        </a>
+        <Tooltip content="+1 234-567-8901" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-phone" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (skype) {
     skypeIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="@skypename">
-          <i className="fa fa-skype" />
-        </a>
+        <Tooltip content="@skypename" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-skype" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }

diff --git a/src/components/Tooltip/Tooltip.css b/src/components/Tooltip/Tooltip.css
@@ -0,0 +1,9 @@
+/* Tooltip-specific Stylesheet */
+
+.tbr-arrow-vertical {
+  left: calc(50% - 0.4rem);
+}
+
+.tbr-arrow-horizontal {
+  top: calc(50% - 0.4rem);
+}
diff --git a/src/components/Tooltip/Tooltip.examples.md b/src/components/Tooltip/Tooltip.examples.md
@@ -0,0 +1,7 @@
+### Basic Tooltip
+
+```jsx
+<Tooltip content="Tooltip" placement="top">
+  <Tag>Hover Me!</Tag>
+</Tooltip>
+```
diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js
@@ -0,0 +1,105 @@
+// @flow
+
+import * as React from "react";
+import cn from "classnames";
+import { Manager, Placement, Reference, Popper } from "react-popper";
+import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper";
+import styles from "./Tooltip.css";
+
+type Props = {|
+  /**
+   * The reference element which the Tooltip will be based on.
+   */
+  +children?: React.Element<any>,
+  /**
+   * Any additional classNames for the Tooltip.
+   */
+  +className?: string,
+  /**
+   * This is the text content of the Tooltip.
+   */
+  +content: string,
+  /**
+   * This is the placement of the Tooltip (top, bottom, left, right).
+   */
+  +placement?: Placement,
+  +type?: "link",
+|};
+
+type State = {
+  isShown: boolean,
+};
+
+class Tooltip extends React.Component<Props, State> {
+  state = { isShown: false };
+
+  _handleTriggerOnMouseEnter = (e: SyntheticMouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    this.setState({ isShown: true });
+  };
+
+  _handleTriggerOnMouseLeave = (e: SyntheticMouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    this.setState({ isShown: false });
+  };
+
+  render(): React.Node {
+    const { className, children, placement, content } = this.props;
+
+    const classes = cn(
+      "tooltip",
+      placement && "bs-tooltip-" + placement,
+      {
+        show: this.state.isShown,
+      },
+      className
+    );
+
+    const arrowClasses = cn(
+      "arrow",
+      placement === "top" || placement === "bottom"
+        ? styles["tbr-arrow-vertical"]
+        : styles["tbr-arrow-horizontal"]
+    );
+
+    return (
+      <Manager>
+        <Reference>
+          {({ ref }: ReferenceChildrenProps) =>
+            typeof children !== "undefined" &&
+            (this.props.type
+              ? React.cloneElement(children, {
+                  ref: ref,
+                  onMouseEnter: this._handleTriggerOnMouseEnter,
+                  onMouseLeave: this._handleTriggerOnMouseLeave,
+                })
+              : React.cloneElement(children, {
+                  rootRef: ref,
+                  onMouseEnter: this._handleTriggerOnMouseEnter,
+                  onMouseLeave: this._handleTriggerOnMouseLeave,
+                }))
+          }
+        </Reference>
+        {this.state.isShown && (
+          <Popper placement={placement} eventsEnabled={true}>
+            {({ ref, style, placement }: PopperChildrenProps) => {
+              return (
+                <div
+                  className={classes}
+                  data-placement={placement}
+                  style={style}
+                  ref={ref}
+                >
+                  <div className={arrowClasses} />
+                  <div className="tooltip-inner">{content}</div>
+                </div>
+              );
+            }}
+          </Popper>
+        )}
+      </Manager>
+    );
+  }
+}
+
+export default Tooltip;
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+import Tooltip from "./Tooltip.react";
+
+export { Tooltip as default };
diff --git a/src/components/index.js b/src/components/index.js
@@ -36,4 +36,5 @@ export { default as Table } from "./Table";
 export { default as Tag } from "./Tag";
 export { default as Text } from "./Text";
 export { default as Timeline } from "./Timeline";
+export { default as Tooltip } from "./Tooltip";
 export { Tab, Tabs, TabbedContainer, TabbedHeader } from "./Tabs";
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -184,6 +184,10 @@ module.exports = {
           name: "Text",
           components: "src/components/Text/**/*.react.{js,jsx}",
         },
+        {
+          name: "Tooltip",
+          components: "src/components/Tooltip/**/*.react.{js,jsx}",
+        },
       ],
     },
     {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.495767ab.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.3b1ce0e9.js"></script></body></html>