@atlaskit/tooltip

Tooltip

Use this component to display extra information about an element by displaying a floating description.

Installation

npm install @atlaskit/tooltip

Using the component

@atlaskit/tooltip exports two tooltip components, one "smart" and one "dumb". The smart component allows you to simply place the tooltip around an element and all the state handling will be handled for you. The dumb one on the other hand allows you to hook into events and to manage the state yourself.

Smart Component

// Note we are using the default export here, so the name can be anything
import Tooltip from '@atlaskit/tooltip';

ReactDOM.render(<div>
  <Tooltip description="Opens the user preferences screen in a new window" position="bottom">
    <button>I do something!</button>
  </Tooltip>
</div>, container);

In this case, the only props you need to use are description and position (and the content you want to bind the tooltip to).

If a user were to hover over this button, they would see a tooltip rendered underneath it. If there was not enought space below, the tooltip would automatically move to the top.

Dumb Component

// Note we are using a named export here, which *must* be 'Tooltip'
import { Tooltip } from '@atlaskit/tooltip';
let tooltipVisibleState = false;

function handleMouseOver() {
  tooltipVisibleState = true;
  renderButtonInContainer();
}

function handleMouseOut() {
  tooltipVisibleState = false;
  renderButtonInContainer();
}

function renderButtonInContainer() {
  ReactDOM.render(<div>
    <Tooltip
      description="Opens the user preferences screen in a new window"
      position="bottom"
      visible={tooltipVisibleState}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
    >
      <button>I do something!</button>
    </Tooltip>
  </div>, container);
}

This is a contrived example to show the usage of onMouseOver and onMouseOut as a way of controlling your own state.

Obviously your state would normally be stored in a component or value store.

Tooltip

Kind: global class

• Properties

  • tooltip.position : string
  • tooltip.description : string
  • tooltip.visible : boolean

new Tooltip()

React component used to display floating tooltips next to a component.

HTML Example

<AKTooltip description="Foo!" position="right"><div>Foo</div></AKTooltip>

tooltip.position : string

The location of where the tooltip will appear, relative to the component it is bound to. Allowed values: top, bottom, left and right.

Kind: instance property of Tooltip
Default: "bottom"

tooltip.description : string

The text to display in the tooltip when a user hovers over the element.

Kind: instance property of Tooltip
Default: "''"

tooltip.visible : boolean

Whether or not the tooltip is open and visible on the page.

Kind: instance property of Tooltip
Default: false

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!