Tooltips View Source



The Tooltip component is used to provide the user with more information in a message that appears when they interact with an element.



Imports



Import the GlobalTooltip, TooltipWrapper, and optionally the TooltipAnchor Components.


0
import * as React from "react";
1
import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system";



Tooltip



Declare the GlobalTooltip at the root level of your document (e.g. in index.js or App.js) so it is accessible throughout and will not get buried in the DOM tree.

0
class App extends React.Component {
1
  render() {
2
    return (
3
      <React.Fragment>
4
        <GlobalTooltip />
5
      </React.Fragment>
6
    );
7
  }
8
}

Then, wrap your desired anchor with a TooltipWrapper. The wrapper's id should match the id in the dispatchCustomEvent call. This id must be unique for each tooltip.

The tooltip component, passed in as content to TooltipWrapper, will be displayed when a dispatchCustomEvent is called with its id.

Hello friends!! This is a tooltip from the slate-react-system


0
class ExampleOne extends React.Component {
1
  _handleMouseEnter = (e) => {
2
    dispatchCustomEvent({
3
      name: "show-tooltip",
4
      detail: {
5
        id: "unique-tooltip-id",
6
      },
7
    });
8
  };
9
  _handleMouseLeave = (e) => {
10
    dispatchCustomEvent({
11
      name: "hide-tooltip",
12
      detail: {
13
        id: "unique-tooltip-id",
14
      },
15
    });
16
  };
17
  render() {
18
    let content = (
19
      <div css={STYLES_TOOLTIP_BUBBLE}>
20
        {this.props.tooltip}
21
      </div>
22
    );
23
    return (
24
      <TooltipWrapper
25
        id="unique-tooltip-id"
26
        content={content}
27
      >
28
        <span
29
          onMouseEnter={this._handleMouseEnter}
30
          onMouseLeave={this._handleMouseLeave}
31
        >
32
          <SVG.Information height="24px" />
33
        </span>
34
      </TooltipWrapper>
35
    )
36
  }
37
}



Tooltip Anchor



For a pre-styled tooltip that accepts a string and handles dispatchCustomEvent and styling for you, use the TooltipAnchor component. Be sure to give it a unique id.

Hello friends!


0
class ExampleTwo extends React.Component {
1
  render() {
2
    return <TooltipAnchor id="another-unique-tooltip-id" tooltip="Hello friends!" />;
3
  }
4
}



Setting an Orientation



You can set a tooltip to appear in a set orientation using the horizontal and vertical props. These can be applied to both the TooltipWrapper and the TooltipAnchor components.

Horizontal

horizontal: "center", vertical: "above"
Vertical


0
class ExampleThree extends React.Component {
1
  render() {
2
    return (
3
      <TooltipAnchor
4
        id="yet-another-unique-tooltip-id"
5
        tooltip="Hello friends!"
6
        style={{ opacity: "70%" }}
7
        horizontal="center"
8
        vertical="above"
9
      />
10
    );
11
  }
12
}



Accepted React Properties



TooltipAnchor Properties
NameTypeDefaultDescription
id
string
null
Unique id to identify the tooltip.
tooltip
string
null
Output text on the tooltip bubble.
height
number
24px
Height of the tooltip anchor icon.
style
Object
null
Style applied to the tooltip bubble.
anchorStyle
Object
null
Style applied to the tooltip anchor.
children
Object
null
Will be rendered instead of the default question mark SVG as the tooltip anchor.
horizontal
string
center
Horizontal positioning of the tooltip relative to the anchor (far-left, left, center, right, far-right)
vertical
string
above
Vertical positioning of the tooltip relative to the anchor (above, up, center, down, below)


TooltipWrapper Properties
NameTypeDefaultDescription
id
string
null
Unique id to identify the tooltip.
content
Component
null
Component rendered as the tooltip bubble.
horizontal
string
center
Horizontal positioning of the tooltip relative to the anchor (far-left, left, center, right, far-right)
vertical
string
above
Vertical positioning of the tooltip relative to the anchor (above, up, center, down, below)
children
Component
null
The tooltip anchor
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source