1 | @# Tooltip
|
2 |
|
3 | <div class="@ns-callout @ns-intent-danger @ns-icon-error">
|
4 | <h4 class="@ns-heading">
|
5 |
|
6 | Deprecated: use [Tooltip2](#popover2-package/tooltip2)
|
7 |
|
8 | </h4>
|
9 |
|
10 | This component is **deprecated since @blueprintjs/core v3.38.0** in favor of the new
|
11 | Tooltip2 component available in the `@blueprintjs/popover2` package. You should migrate
|
12 | to the new API which will become the standard in Blueprint v4.
|
13 |
|
14 | </div>
|
15 |
|
16 | A tooltip is a lightweight popover for showing additional information during hover interactions.
|
17 |
|
18 | @reactExample TooltipExample
|
19 |
|
20 | @## Combining with popover
|
21 |
|
22 | A single target can be wrapped in both a popover and a tooltip.
|
23 |
|
24 | You must put the `Tooltip` _inside_ the `Popover` (and the target inside the
|
25 | `Tooltip`), so the final hierarchy is `Popover > Tooltip > target` This order is
|
26 | required because the popover will disable the tooltip when it is open,
|
27 | preventing both elements from appearing at the same time.
|
28 |
|
29 | Also, you must take to either set `<Popover2 shouldReturnFocusOnClose={false}>`
|
30 | or `<Tooltip2 openOnTargetFocus={false}>` in this scenario in order to avoid undesirable
|
31 | UX where the tooltip could open automatically when a user doesn't want it to.
|
32 |
|
33 | ```tsx
|
34 | import { Button, Popover, Position, Tooltip } from "@blueprintjs/core";
|
35 |
|
36 | <Popover content={<h1>Popover!</h1>} position={Position.RIGHT}>
|
37 | <Tooltip content="I have a popover!" position={Position.RIGHT} openOnTargetFocus={false}>
|
38 | <Button>Hover and click me</Button>
|
39 | </Tooltip>
|
40 | </Popover>;
|
41 | ```
|
42 |
|
43 | @## Props
|
44 |
|
45 | `Tooltip` simply passes its props to [`Popover`](#core/components/popover), with
|
46 | some exceptions. Notably, it only supports `HOVER` interactions and the `target`
|
47 | prop is not supported.
|
48 |
|
49 | When creating a tooltip, you must specify both:
|
50 |
|
51 | - its _content_ via the `content` prop, and
|
52 | - its _target_ as either:
|
53 | - a single child element, or
|
54 | - an instrinsic element string identifier (N.B. this doesn't work if you are using any of the target props, so use an element instead, i.e. `<div>...</div>` instead of `"div"`).
|
55 |
|
56 | The content will appear in a contrasting popover when the target is hovered.
|
57 |
|
58 | <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
|
59 | <h4 class="@ns-heading">Button targets</h4>
|
60 |
|
61 | Buttons make great tooltip targets, but the `disabled` attribute will prevent all
|
62 | events so the enclosing `Tooltip` will not know when to respond.
|
63 | Use [`AnchorButton`](#core/components/button.anchor-button) instead;
|
64 | see the [callout here](#core/components/button.props) for more details.
|
65 |
|
66 | </div>
|
67 |
|
68 | @interface ITooltipProps
|