rc-tooltip

Basic Tooltip

This code sample demonstrates how to create a basic tooltip that appears on top of an element when it is hovered over. The tooltip's content is specified as 'Tooltip text'.

import React from 'react';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap.css';

const BasicTooltip = () => (
  <Tooltip placement="top" trigger={['hover']} overlay={<span>Tooltip text</span>}>
    <a href="#">Hover me</a>
  </Tooltip>
);

Customized Tooltip

This example shows how to create a tooltip that appears to the right of an element when clicked. The tooltip displays custom content, including a custom style and an arrow pointing to the target element.

import React from 'react';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap_white.css';

const CustomTooltip = () => (
  <Tooltip
    placement="right"
    trigger={['click']}
    overlay={<div style={{ height: 50, width: 100, backgroundColor: '#89CFF0' }}>Custom Content</div>}
    arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
  >
    <a href="#">Click me</a>
  </Tooltip>
);

Dynamic Tooltip

This code snippet illustrates how to create a tooltip with dynamic visibility, controlled by the component's state. The tooltip appears when the mouse enters the target element and disappears when it leaves.

import React, { useState } from 'react';
import Tooltip from 'rc-tooltip';

const DynamicTooltip = () => {
  const [visible, setVisible] = useState(false);
  return (
    <Tooltip
      visible={visible}
      onVisibleChange={(vis) => setVisible(vis)}
      overlay={<span>Dynamic Content</span>}
    >
      <a href="#" onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>Hover or Leave</a>
    </Tooltip>
  );
};