Basic usage

In Button and Link, Hint can be enabled by using either title or aria-label attribute.

You can set the Hint's position using the hintPlacement property.

import FileExportM from '@semcore/icon/FileExport/m';
import LinkExternalM from '@semcore/icon/LinkExternal/m';
import { Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => {
  return (
    <Flex gap={3} alignItems='center'>
      <Button addonLeft={FileExportM} title='Export to PDF' />
      <Link
        href='https://semrush.com/'
        addonLeft={LinkExternalM}
        aria-label='semrush.com'
        hintPlacement='right'
      />
    </Flex>
  );
};

export default Demo;

Hint properties

In components based on Text, hint properties can be accessed using the hint: prefix.

import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => (
  <Link>
    <Link.Text
      ellipsis
      w={100}
      hint:placement='right'
    >
      Long link text with hint on the right
    </Link.Text>
  </Link>
);

export default Demo;

Advanced usage

To use Hint with other components, or for deeper customization, use the Hint component explicitly with triggerRef property.

import LinkExternalM from '@semcore/icon/LinkExternal/m';
import { Hint } from '@semcore/ui/base-components';
import React from 'react';

const Demo = () => {
  const ref = React.useRef<HTMLAnchorElement | null>(null);

  return (
    <>
      <a href='https://www.semrush.com/' ref={ref}>
        <LinkExternalM />
      </a>
      <Hint triggerRef={ref} timeout={[200, 150]}>
        Hint with custom animation timeouts
      </Hint>
    </>
  );
};

export default Demo;

With ellipsis

When using with Ellipsis, Hint is usually enabled automatically when text is overflowing. For more information, refer to Ellipsis.