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 = ( ); render(buttonWithTooltip, document.getElementById('tooltip')); :global(#tooltip) { padding-bottom: 100px; }
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 = (
Tooltip won't be displayed: {loremIpsum}
Tooltip will be displayed: {loremIpsum}
); 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; }