UnpopularTooltip Documentation

The UnpopularTooltip component provides a customizable tooltip with various options. Below are examples showcasing different configurations and use cases.

Props

The UnpopularTooltip component accepts the following props:

Prop	Type	Description
content	string	The content of the tooltip.
backgroundColor	string	The background color of the tooltip.
color	string	The text color of the tooltip.
borderRadius	string	The border radius of the tooltip.
padding	string	The padding of the tooltip.
children	ReactNode	The content of the tooltip.
animation	string	The animation of the tooltip.
delay	number	The delay of the tooltip.
position	string	The position of the tooltip (“top“, “bottom“, “left“, “right“).
fontSize	string	The font size of the tooltip.

Usage Examples

1. Basic Tooltip

This is a basic tooltip

<UnpopularTooltip content="This is a basic tooltip">
  <button
    style={{
      backgroundColor: "#007bff",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Hover over me 
  </button>
</UnpopularTooltip>

2. Tooltip with Custom Colors

Custom colors tooltip

<UnpopularTooltip
  content="Custom colors tooltip"
  backgroundColor="#333"
  color="#fff"
  borderRadius="8px"
  padding="12px"
>
  <button
    style={{
      backgroundColor: "#28a745",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Hover over me
  </button>
</UnpopularTooltip>

3. Tooltip with Slide Animation

Slide animation tooltip

<UnpopularTooltip
  content="Slide animation tooltip"
  animation="slide"
  position="bottom"
>
  <button
    style={{
      backgroundColor: "#dc3545",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Hover over me
  </button>
</UnpopularTooltip>

4. Tooltip with Custom Delay

Tooltip with delay

<UnpopularTooltip content="Tooltip with delay" delay={500}>
  <button
    style={{
      backgroundColor: "#ffc107",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Hover over me
  </button>
</UnpopularTooltip>

5. Tooltip on Different Sides

Tooltip on top

Tooltip on bottom

Tooltip on left

Tooltip on right

<UnpopularTooltip content="Tooltip on top" position="top">
  <button
    style={{
      backgroundColor: "#17a2b8",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Top
  </button>
</UnpopularTooltip>

<UnpopularTooltip content="Tooltip on bottom" position="bottom">
  <button
    style={{
      backgroundColor: "#6c757d",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Bottom
  </button>
</UnpopularTooltip> 

<UnpopularTooltip content="Tooltip on left" position="left">
  <button
    style={{
      backgroundColor: "#007bff",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Left
  </button>
</UnpopularTooltip>

<UnpopularTooltip content="Tooltip on right" position="right">
  <button
    style={{
      backgroundColor: "#28a745",
      color: "#fff",
      border: "none",
      borderRadius: "4px",
      padding: "10px 20px",
      cursor: "pointer",
    }}
  >
    Right
  </button>
</UnpopularTooltip>

Conclusion

The UnpopularTooltip component provides a versatile and stylish solution for displaying tooltips. Utilize its customization options to enhance user experience with elegant and functional toast messages in your React applications.