Tooltip

Displays a tooltip.

Example

<div id="tooltip"></div>

import React from 'react';
import {render} from 'react-dom';

import Tooltip from '@jetbrains/ring-ui/components/tooltip/tooltip';
import Button from '@jetbrains/ring-ui/components/button/button';

const buttonWithTooltip = (
  <Tooltip title="Explanation">
    <Button id="button-with-explanation">Button that requires an explanation</Button>
  </Tooltip>
);

render(buttonWithTooltip, document.getElementById('tooltip'));

:global(#tooltip) {
  padding-bottom: 100px;
}

Tooltip can only be displayed when necessary

Example

<div id="tooltips"></div>

import React from 'react';
import {render} from 'react-dom';

import Tooltip from '@jetbrains/ring-ui/components/tooltip/tooltip';

const loremIpsum = 'Lorem ipsum dolor sit amet, vitae alienum prodesset vis ei, quando nullam ' +
                   'oportere sea eu, vim an labore diceret docendi. Vim ne illud iusto feugait, ' +
                   'sea laudem prompta accommodare eu, vidit noster efficiantur est id. Ex vide ' +
                   'tollit necessitatibus est, eum no quas dicunt. Luptatum singulis usu ne, cu ' +
                   'sit populo semper civibus. Tamquam dolorem qui ea, nec no dolor vidisse conceptam, ' +
                   'an est ponderum eloquentiam.';

const twoLoremIpsums = (
  <React.Fragment>
    <div className="lorem-ipsum">
      <Tooltip title={loremIpsum} selfOverflowOnly className="lorem-ipsum__text">
        <b>Tooltip won't be displayed:</b> {loremIpsum}
      </Tooltip>
    </div>
    <div className="lorem-ipsum">
      <Tooltip title={loremIpsum} selfOverflowOnly className="lorem-ipsum__text_overflow">
        <b>Tooltip will be displayed:</b> {loremIpsum}
      </Tooltip>
    </div>
  </React.Fragment>
);

render(twoLoremIpsums, document.getElementById('tooltips'));

:global(.lorem-ipsum) {
  padding-bottom: 200px;
}

:global(.lorem-ipsum__text_overflow) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}