diff --git a/example/src/App.js b/example/src/App.js index 52d58641c..a633680bb 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,858 +1,859 @@ -import React, { Component } from "react"; - -import ReactTooltip from "react-tooltip"; - -export default class App extends Component { - constructor(props) { - super(props); - this.state = { - place: "top", - type: "dark", - effect: "float", - condition: false - }; - } - - changePlace(place) { - this.setState({ - place: place - }); - } - - changeType(type) { - this.setState({ - type: type - }); - } - - changeEffect(effect) { - this.setState({ - effect: effect - }); - } - - _onClick() { - this.setState({ - condition: true - }); - } - - render() { - const { place, type, effect } = this.state; - return ( -
-
-

React Tooltip

-
- - ◕‿‿◕ - -
-
-
-
-

Place

- - Top(default) - - - Right - - - Bottom - - - Left - -
-
-

Type

- - Dark(default) - - - Success - - - Warning - - - Error - - - Info - - - Light - -
-
-

Effect

- - Float(default) - - - Solid - -
-
- 
-              

-                
Code

-                

-                
{' ◕‿‿◕ '}

-                

-                  {''}
-                

-              

-
-
- -
-
-
-

Advance features

-

Use everything as tooltip

- -
-
- - d(`･∀･)b - - - Show happy face - -
-
- - இдஇ - - - Show sad face - -
-
-
- 
-              

-                

-                  {" d(`･∀･)b \n" +
-                    "\n" +
-                    " " +
-                    " " +
-                    "Show happy face\n" +
-                    "\n" +
-                    " இдஇ \n" +
-                    "\n" +
-                    " " +
-                    " " +
-                    "Show sad face\n" +
-                    ""}
-                

-              

-
-
-
- - σ`∀´)σ - -
-
- - (〃∀〃) - -
- -

This is a global react component tooltip

-

You can put every thing here

-
    -
  • Word
    • -
  • Chart
    • -
  • Else
    • -
- -
- 
-              

-                

-                  {" σ`∀´)σ \n" +
-                    " (〃∀〃) \n" +
-                    "\n" +
-                    " 
This is a global react component tooltip
\n" +
-                    " 
You can put every thing here
\n" +
-                    " 
    \n" +
-                    " " +
-                    " " +
-                    " 
  • Word
    • \n" +
-                    " " +
-                    " " +
-                    " 
  • Chart
    • \n" +
-                    " " +
-                    " " +
-                    " 
  • Else
    • \n" +
-                    " 
\n" +
-                    ""}
-                

-              

-
-
-
-
-
-

Custom event

-

-

-
- - ( •̀д•́) - - -
-
- (this.targetRef = ref)} - data-tip="custom show and hide" - data-event="click" - data-event-off="dblclick" - > - ( •̀д•́) - - -
-
-
- 
-              

-                

-                  {"( •̀д•́)\n" +
-                    ""}
-                

-              

-              

-                

-                  {"( •̀д•́)\n" +
-                    ""}
-                

-              

-
-
- -
-

Custom colors

-

-

-
- - ㅇㅅㅇ - - -
-
- - V(^-^)V - - -
-
-
- 
-              

-                

-                  {"ㅇㅅㅇ\n" +
-                    ""}
-                

-              

-              

-                

-                  {"V(^-^)V\n" +
-                    ""}
-                

-              

-
-
- -
-

Theme and delay

-

-

-
- - (･ω´･ ) - - -
-
- - (･ω´･ ) - - -
-
-
- 
-              

-                

-                  {"(･ω´･ )\n" +
-                    "\n" +
-                    ".extraClass {\n" +
-                    " font-size: 20px !important;\n" +
-                    " pointer-events: auto !important;\n" +
-                    " &:hover {\n" +
-                    "visibility: visible !important;\n" +
-                    "opacity: 1 !important;\n" +
-                    " }\n" +
-                    "}"}
-                

-              

-              

-                

-                  {"(･ω´･ )\n" +
-                    "\n" +
-                    " .customeTheme {\n" +
-                    " color: #ff6e00 !important;\n" +
-                    " background-color: orange !important;\n" +
-                    " &.place-top {\n" +
-                    " &:after {\n" +
-                    " border-top-color: orange !important;\n" +
-                    " border-top-style: solid !important;\n" +
-                    " border-top-width: 6px !important;\n" +
-                    " }\n" +
-                    " }\n" +
-                    "}"}
-                

-              

-
-
- -
-

Update tip content over time

-

-

-
- - =( •̀д•́) - - Math.floor(Math.random() * 100)} - /> -
-
- - =( •̀д•́) - - { - return "Random length content".slice( - 0, - Math.floor(Math.random() * 21) + 1 - ); - }, - 1000 - ]} - /> -
-
-
- 
-              

-                

-                  {"=( •̀д•́)\n" +
-                    " Math.floor(Math.random() * 100)} />"}
-                

-              

-              

-                

-                  {"=( •̀д•́)\n" +
-                    " {\n" +
-                    " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
-                    "}, 1000]}/>"}
-                

-              

-
-
- -
-

Compute or enrich tip content

-

-

-
- - (❂‿❂) - -
-
- - (❂‿❂) - -
- "This little buddy is " + dataTip} - /> -
-
- 
-              

-                

-                  {"(❂‿❂)\n" +
-                    "(❂‿❂)\n" +
-                    " `This little buddy is ${dataTip}`}/>"}
-                

-              

-
-
- -
-

Test Scrolling

-

-

-
-
- Scroll me with the mouse wheel. -
- The tooltip will hide. -
- Make sure you set data-iscapture="true" -
- Math.floor(Math.random() * 100)} - /> -
-
-
- Scroll me with the mouse wheel. -
- The tooltip will stay visible. -
- { - return new Date().toISOString(); - }, - 1000 - ]} - /> -
-
-
- 
-              

-                

-                  {"
...
\n" +
-                    " Math.floor(Math.random() * 100)}/>"}
-                

-              

-              

-                

-                  {"
...
\n" +
-                    " {return new Date().toISOString()}, 1000]}/>"}
-                

-              

-
-
- -
-

Test SVG

-

Note: if you dynamically change elements in the SVG, add:

- 
-              {"  componentDidUpdate() {\n" +
-                "    ReactTooltip.rebuild()\n" +
-                "  }"}
-
-

-

-
- - - - -
-
- - - - - -
-
-
- 
-              

-                

-                  {"\n" +
-                    "  \n" +
-                    "\n" +
-                    ""}
-                

-                

-                  {"\n" +
-                    "\n" +
-                    "\n" +
-                    "\n" +
-                    ""}
-                

-              

-
-
- -
-

Demonstrate using mouse in tooltip.

-

- Notice that the tooltip delays going away so you can get your - mouse in it. You must set delayUpdate and delayHide for the - tooltip to stay long enough to get your mouse over it. -

-

-

-
- - 1 (❂‿❂) - -
-
- - 2 (❂‿❂) - -
-
- - 3 (❂‿❂) - -
-
- - 4 (❂‿❂) - -
-
- - 5 (❂‿❂) - -
-
- - 6 (❂‿❂) - -
-
- - 7 (❂‿❂) - -
-
- - 8 (❂‿❂) - -
- - ( -
-

This little buddy is {dataTip}

-

Put mouse here

-
- )} - effect="solid" - delayHide={500} - delayShow={500} - delayUpdate={500} - place="right" - border={true} - type="light" - /> -
-
- 
-              

-                
{"1 (❂‿❂)"}

-                
{"2 (❂‿❂)..."}

-                
{"8 (❂‿❂)"}

-                

-                  {" \n" +
-                    "  
This little buddy is {dataTip}
Put mouse here
 }\n" +
-                    "  effect='solid'\n" +
-                    "  delayHide={500}\n" +
-                    "  delayShow={500}\n" +
-                    "  delayUpdate={500}\n" +
-                    "  place={'right'}\n" +
-                    "  border={true}\n" +
-                    "  type={'light'}\n" +
-                    "/>"}
-                

-              

-
- -

- When clickable property is set to true, tooltip - can respond to mouse (or touch) events. -

-

-

-
- - (❂‿❂) - -
- - - - -
-
- 
-              

-                

-                  {
-                    " (❂‿❂) "
-                  }
-                

-                

-                  {"\n" +
-                    " \n" +
-                    ""}
-                

-              

-
-
- -
-

Override position

-

- Try to resize/zoom in window - tooltip in this sample will try to - magnet to window borders, top left border is priority here. Idea - is following: sometimes you have custom border cases, like custom - scrolls, small windows, iframes, react-tooltip itself can not - cover everything, so up to you if you want to customize default - behavior, or may be just limit it like in this example. -

-
-
- - ( •̀д•́) override - - { - const d = document.documentElement; - - left = Math.min(d.clientWidth - node.clientWidth, left); - top = Math.min(d.clientHeight - node.clientHeight, top); - - left = Math.max(0, left); - top = Math.max(0, top); - - return { top, left }; - }} - > -
header
- lorem 100x1500 -
footer
- - - ( •̀д•́) noOverride - - -
header
- lorem 100x1500 -
footer
- -
-
-
- 
-              

-                

-                  {"( •̀д•́) override\n" +
-                    " {\n" +
-                    "  const d = document.documentElement;\n" +
-                    "  left = Math.min(d.clientWidth - node.clientWidth, left);\n" +
-                    "  top = Math.min(d.clientHeight - node.clientHeight, top);\n" +
-                    "  left = Math.max(0, left);\n" +
-                    "  top = Math.max(0, top);\n" +
-                    "  return { top, left }\n" +
-                    "} }>\n" +
-                    "  
header
\n" +
-                    '  lorem image 100x1500\n' +
-                    "  
footer
\n" +
-                    "\n" +
-                    "( •̀д•́) noOverride\n" +
-                    "\n" +
-                    "  
header
\n" +
-                    '  lorem image 100x1500\n' +
-                    "  
footer
\n" +
-                    ""}
-                

-              

-
-
-
-
- ); - } -} +import React, { Component } from "react"; + +import ReactTooltip from "react-tooltip"; + +export default class App extends Component { + constructor(props) { + super(props); + this.state = { + place: "top", + type: "dark", + effect: "float", + condition: false + }; + } + + changePlace(place) { + this.setState({ + place: place + }); + } + + changeType(type) { + this.setState({ + type: type + }); + } + + changeEffect(effect) { + this.setState({ + effect: effect + }); + } + + _onClick() { + this.setState({ + condition: true + }); + } + + render() { + const { place, type, effect } = this.state; + return ( +
+
+

React Tooltip

+
+ + ◕‿‿◕ + +
+
+
+
+

Place

+ + Top(default) + + + Right + + + Bottom + + + Left + +
+
+

Type

+ + Dark(default) + + + Success + + + Warning + + + Error + + + Info + + + Light + +
+
+

Effect

+ + Float(default) + + + Solid + +
+
+ 
+              

+                
Code

+                

+                
{' ◕‿‿◕ '}

+                

+                  {''}
+                

+              

+
+
+ +
+
+
+

Advance features

+

Use everything as tooltip

+ +
+
+ + d(`･∀･)b + + + Show happy face + +
+
+ + இдஇ + + + Show sad face + +
+
+
+ 
+              

+                

+                  {" d(`･∀･)b \n" +
+                    "\n" +
+                    " " +
+                    " " +
+                    "Show happy face\n" +
+                    "\n" +
+                    " இдஇ \n" +
+                    "\n" +
+                    " " +
+                    " " +
+                    "Show sad face\n" +
+                    ""}
+                

+              

+
+
+
+ + σ`∀´)σ + +
+
+ + (〃∀〃) + +
+ +

This is a global react component tooltip

+

You can put every thing here

+
    +
  • Word
    • +
  • Chart
    • +
  • Else
    • +
+ +
+ 
+              

+                

+                  {" σ`∀´)σ \n" +
+                    " (〃∀〃) \n" +
+                    "\n" +
+                    " 
This is a global react component tooltip
\n" +
+                    " 
You can put every thing here
\n" +
+                    " 
    \n" +
+                    " " +
+                    " " +
+                    " 
  • Word
    • \n" +
+                    " " +
+                    " " +
+                    " 
  • Chart
    • \n" +
+                    " " +
+                    " " +
+                    " 
  • Else
    • \n" +
+                    " 
\n" +
+                    ""}
+                

+              

+
+
+
+
+
+

Custom event

+

+

+
+ + ( •̀д•́) + + +
+
+ (this.targetRef = ref)} + data-tip="custom show and hide" + data-event="click" + data-event-off="dblclick" + > + ( •̀д•́) + + +
+
+
+ 
+              

+                

+                  {"( •̀д•́)\n" +
+                    ""}
+                

+              

+              

+                

+                  {"( •̀д•́)\n" +
+                    ""}
+                

+              

+
+
+ +
+

Custom colors

+

+

+
+ + ㅇㅅㅇ + + +
+
+ + V(^-^)V + + +
+
+
+ 
+              

+                

+                  {"ㅇㅅㅇ\n" +
+                    ""}
+                

+              

+              

+                

+                  {"V(^-^)V\n" +
+                    ""}
+                

+              

+
+
+ +
+

Theme and delay

+

+

+
+ + (･ω´･ ) + + +
+
+ + (･ω´･ ) + + +
+
+
+ 
+              

+                

+                  {"(･ω´･ )\n" +
+                    "\n" +
+                    ".extraClass {\n" +
+                    " font-size: 20px !important;\n" +
+                    " pointer-events: auto !important;\n" +
+                    " &:hover {\n" +
+                    "visibility: visible !important;\n" +
+                    "opacity: 1 !important;\n" +
+                    " }\n" +
+                    "}"}
+                

+              

+              

+                

+                  {"(･ω´･ )\n" +
+                    "\n" +
+                    " .customeTheme {\n" +
+                    " color: #ff6e00 !important;\n" +
+                    " background-color: orange !important;\n" +
+                    " &.place-top {\n" +
+                    " &:after {\n" +
+                    " border-top-color: orange !important;\n" +
+                    " border-top-style: solid !important;\n" +
+                    " border-top-width: 6px !important;\n" +
+                    " }\n" +
+                    " }\n" +
+                    "}"}
+                

+              

+
+
+ +
+

Update tip content over time

+

+

+
+ + =( •̀д•́) + + Math.floor(Math.random() * 100)} + /> +
+
+ + =( •̀д•́) + + { + return "Random length content".slice( + 0, + Math.floor(Math.random() * 21) + 1 + ); + }, + 1000 + ]} + /> +
+
+
+ 
+              

+                

+                  {"=( •̀д•́)\n" +
+                    " Math.floor(Math.random() * 100)} />"}
+                

+              

+              

+                

+                  {"=( •̀д•́)\n" +
+                    " {\n" +
+                    " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
+                    "}, 1000]}/>"}
+                

+              

+
+
+ +
+

Compute or enrich tip content

+

+

+
+ + (❂‿❂) + +
+
+ + (❂‿❂) + +
+ "This little buddy is " + dataTip} + /> +
+
+ 
+              

+                

+                  {"(❂‿❂)\n" +
+                    "(❂‿❂)\n" +
+                    /* eslint-disable no-template-curly-in-string */
+                    " `This little buddy is ${dataTip}`}/>"}
+                

+              

+
+
+ +
+

Test Scrolling

+

+

+
+
+ Scroll me with the mouse wheel. +
+ The tooltip will hide. +
+ Make sure you set data-iscapture="true" +
+ Math.floor(Math.random() * 100)} + /> +
+
+
+ Scroll me with the mouse wheel. +
+ The tooltip will stay visible. +
+ { + return new Date().toISOString(); + }, + 1000 + ]} + /> +
+
+
+ 
+              

+                

+                  {"
...
\n" +
+                    " Math.floor(Math.random() * 100)}/>"}
+                

+              

+              

+                

+                  {"
...
\n" +
+                    " {return new Date().toISOString()}, 1000]}/>"}
+                

+              

+
+
+ +
+

Test SVG

+

Note: if you dynamically change elements in the SVG, add:

+ 
+              {"  componentDidUpdate() {\n" +
+                "    ReactTooltip.rebuild()\n" +
+                "  }"}
+
+

+

+
+ + + + +
+
+ + + + + +
+
+
+ 
+              

+                

+                  {"\n" +
+                    "  \n" +
+                    "\n" +
+                    ""}
+                

+                

+                  {"\n" +
+                    "\n" +
+                    "\n" +
+                    "\n" +
+                    ""}
+                

+              

+
+
+ +
+

Demonstrate using mouse in tooltip.

+

+ Notice that the tooltip delays going away so you can get your + mouse in it. You must set delayUpdate and delayHide for the + tooltip to stay long enough to get your mouse over it. +

+

+

+
+ + 1 (❂‿❂) + +
+
+ + 2 (❂‿❂) + +
+
+ + 3 (❂‿❂) + +
+
+ + 4 (❂‿❂) + +
+
+ + 5 (❂‿❂) + +
+
+ + 6 (❂‿❂) + +
+
+ + 7 (❂‿❂) + +
+
+ + 8 (❂‿❂) + +
+ + ( +
+

This little buddy is {dataTip}

+

Put mouse here

+
+ )} + effect="solid" + delayHide={500} + delayShow={500} + delayUpdate={500} + place="right" + border={true} + type="light" + /> +
+
+ 
+              

+                
{"1 (❂‿❂)"}

+                
{"2 (❂‿❂)..."}

+                
{"8 (❂‿❂)"}

+                

+                  {" \n" +
+                    "  
This little buddy is {dataTip}
Put mouse here
 }\n" +
+                    "  effect='solid'\n" +
+                    "  delayHide={500}\n" +
+                    "  delayShow={500}\n" +
+                    "  delayUpdate={500}\n" +
+                    "  place={'right'}\n" +
+                    "  border={true}\n" +
+                    "  type={'light'}\n" +
+                    "/>"}
+                

+              

+
+ +

+ When clickable property is set to true, tooltip + can respond to mouse (or touch) events. +

+

+

+
+ + (❂‿❂) + +
+ + + + +
+
+ 
+              

+                

+                  {
+                    " (❂‿❂) "
+                  }
+                

+                

+                  {"\n" +
+                    " \n" +
+                    ""}
+                

+              

+
+
+ +
+

Override position

+

+ Try to resize/zoom in window - tooltip in this sample will try to + magnet to window borders, top left border is priority here. Idea + is following: sometimes you have custom border cases, like custom + scrolls, small windows, iframes, react-tooltip itself can not + cover everything, so up to you if you want to customize default + behavior, or may be just limit it like in this example. +

+
+
+ + ( •̀д•́) override + + { + const d = document.documentElement; + + left = Math.min(d.clientWidth - node.clientWidth, left); + top = Math.min(d.clientHeight - node.clientHeight, top); + + left = Math.max(0, left); + top = Math.max(0, top); + + return { top, left }; + }} + > +
header
+ lorem 100x1500 +
footer
+ + + ( •̀д•́) noOverride + + +
header
+ lorem 100x1500 +
footer
+ +
+
+
+ 
+              

+                

+                  {"( •̀д•́) override\n" +
+                    " {\n" +
+                    "  const d = document.documentElement;\n" +
+                    "  left = Math.min(d.clientWidth - node.clientWidth, left);\n" +
+                    "  top = Math.min(d.clientHeight - node.clientHeight, top);\n" +
+                    "  left = Math.max(0, left);\n" +
+                    "  top = Math.max(0, top);\n" +
+                    "  return { top, left }\n" +
+                    "} }>\n" +
+                    "  
header
\n" +
+                    '  lorem image 100x1500\n' +
+                    "  
footer
\n" +
+                    "\n" +
+                    "( •̀д•́) noOverride\n" +
+                    "\n" +
+                    "  
header
\n" +
+                    '  lorem image 100x1500\n' +
+                    "  
footer
\n" +
+                    ""}
+                

+              

+
+
+
+
+ ); + } +}