docs: re-add "Content" example page

Author: gabrieljablonski

docs/docs/examples/content.mdx

@@ -0,0 +1,75 @@
+---
+sidebar_position: 1
+---
+
+# Content
+
+Content in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `content`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor" content="hello world!" place="left" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
+  <Tooltip
+    anchorId="tooltip-anchor"
+    content="hello world!"
+  />
+</div>
+
+### Using `data-tooltip-content`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a
+  id="tooltip-anchor-data-tooltip-content"
+  data-tooltip-content="hello world!"
+> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor
+    id="tooltip-anchor-data-tooltip-content"
+    data-tooltip-content="hello world!"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
+</div>