---
id: tooltip
position: 5
path: React Tooltip
title: React Popup |  Use case - React Tooltip Example
description: A simple tooltip example with reactjs-popup,Nested Tooltip, all available position
redirects:
  - "use case - Tooltip"
---

import SimpleTooltip from './../src/examples/SimpleTooltip.js'
import ToolTipPositions from './../src/examples/ToolTipPositions.js'

## React Tooltip

Reactjs Popup is built to be a tooltip by default

```jsx live=true
const Tooltip = () => (
  <Popup
    trigger={open => (
      <button className="button">Trigger - {open ? "Opened" : "Closed"}</button>
    )}
    position="right center"
    closeOnDocumentClick
  >
    <span> Popup content </span>
  </Popup>
);

render(Tooltip)
```

## React Tooltip position

<ToolTipPositions/>

```jsx
import React from "react";
import Popup from "reactjs-popup";

const Card = ({ title }) => (
  <div className="card">
    <div className="header">{title} position </div>
    <div className="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit autem
      sapiente labore architecto exercitationem optio quod dolor cupiditate
    </div>
  </div>
);

const ToolTipPositions = () => (
  <div className="example-warper">
    <Popup
      trigger={<button className="button"> Right Top </button>}
      position="right top"
      on="hover"
    >
      <Card title="Right Top" />
    </Popup>

    <Popup
      trigger={<button className="button"> Bottom Center </button>}
      position="bottom center"
      on="hover"
    >
      <Card title="Bottom Center" />
    </Popup>

    <Popup
      trigger={<button className="button"> Left Top </button>}
      position="left top"
      on="hover"
    >
      <Card title="Left Top" />
    </Popup>

    <Popup
      trigger={<button className="button"> Right Center </button>}
      position="right center"
      on="hover"
    >
      <Card title="Right Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> Top Center </button>}
      position="top center"
      on="hover"
    >
      <Card title="Top Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> left Center </button>}
      position="left center"
      on="hover"
    >
      <Card title="Left Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> Right Bottom </button>}
      position="right bottom"
      on="hover"
    >
      <Card title="Right bottom" />
    </Popup>

    <Popup
      trigger={<button className="button"> Top Center </button>}
      position="top center"
      on="hover"
    >
      <Card title="Top Center" />
    </Popup>

    <Popup
      trigger={<button className="button"> Left Bottom </button>}
      position="left bottom"
      on="hover"
    >
      <Card title="Left Bottom" />
    </Popup>
  </div>
);
```

```css
.card {
  font-size: 12px;
}
.card > .header {
  width: 100%;
  border-bottom: 1px solid gray;
  font-size: 14px;
  text-align: center;
}
```