@conveyorhq/arrow-ds 1.34.1 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -94,8 +94,18 @@ const Tooltip = (props) => {
|
|
|
94
94
|
});
|
|
95
95
|
const referenceElementWithMouseHandlers = !isVisibleProp
|
|
96
96
|
? react_1.cloneElement(referenceElement, {
|
|
97
|
-
onMouseEnter:
|
|
98
|
-
|
|
97
|
+
onMouseEnter: () => {
|
|
98
|
+
handleMouseEnter();
|
|
99
|
+
if (typeof referenceElement.props.onMouseEnter === "function") {
|
|
100
|
+
referenceElement.props.onMouseEnter();
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
onMouseLeave: () => {
|
|
104
|
+
handleMouseLeave();
|
|
105
|
+
if (typeof referenceElement.props.onMouseLeave === "function") {
|
|
106
|
+
referenceElement.props.onMouseLeave();
|
|
107
|
+
}
|
|
108
|
+
},
|
|
99
109
|
onFocus: () => {
|
|
100
110
|
handleMouseEnter();
|
|
101
111
|
if (typeof referenceElement.props.onFocus === "function") {
|
|
@@ -45,6 +45,20 @@ import { Tooltip } from "@conveyorhq/arrow-ds";
|
|
|
45
45
|
|
|
46
46
|
<Props of={Tooltip} />
|
|
47
47
|
|
|
48
|
+
## Events
|
|
49
|
+
|
|
50
|
+
The following events are are placed on the reference element in order to control
|
|
51
|
+
the visibility of the tooltip popover.
|
|
52
|
+
|
|
53
|
+
- `onMouseEnter` (show)
|
|
54
|
+
- `onMouseLeave` (hide)
|
|
55
|
+
- `onFocus` (show)
|
|
56
|
+
- `onBlur` (hide)
|
|
57
|
+
|
|
58
|
+
If the reference element includes any one of these events, it’ll be passed on
|
|
59
|
+
and merged with the actions listed above. See the demo “Passing custom event
|
|
60
|
+
handlers” below.
|
|
61
|
+
|
|
48
62
|
<Accessibility
|
|
49
63
|
description={
|
|
50
64
|
<>
|
|
@@ -209,3 +223,23 @@ component will return the `referenceElement` instead.
|
|
|
209
223
|
}}
|
|
210
224
|
</Story>
|
|
211
225
|
</Preview>
|
|
226
|
+
|
|
227
|
+
### Passing custom event handlers
|
|
228
|
+
|
|
229
|
+
<Preview>
|
|
230
|
+
<Story name="Tooltip passing custom event handlers">
|
|
231
|
+
<Tooltip
|
|
232
|
+
placement="top"
|
|
233
|
+
referenceElement={
|
|
234
|
+
<Button
|
|
235
|
+
onMouseEnter={() => console.log("Do something fun")}
|
|
236
|
+
onMouseLeave={() => console.log("Bye")}
|
|
237
|
+
>
|
|
238
|
+
Save Changes
|
|
239
|
+
</Button>
|
|
240
|
+
}
|
|
241
|
+
>
|
|
242
|
+
This will save your changes
|
|
243
|
+
</Tooltip>
|
|
244
|
+
</Story>
|
|
245
|
+
</Preview>
|
|
@@ -102,8 +102,18 @@ export const Tooltip = (props: TooltipProps) => {
|
|
|
102
102
|
|
|
103
103
|
const referenceElementWithMouseHandlers = !isVisibleProp
|
|
104
104
|
? cloneElement(referenceElement, {
|
|
105
|
-
onMouseEnter:
|
|
106
|
-
|
|
105
|
+
onMouseEnter: () => {
|
|
106
|
+
handleMouseEnter();
|
|
107
|
+
if (typeof referenceElement.props.onMouseEnter === "function") {
|
|
108
|
+
referenceElement.props.onMouseEnter();
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
onMouseLeave: () => {
|
|
112
|
+
handleMouseLeave();
|
|
113
|
+
if (typeof referenceElement.props.onMouseLeave === "function") {
|
|
114
|
+
referenceElement.props.onMouseLeave();
|
|
115
|
+
}
|
|
116
|
+
},
|
|
107
117
|
onFocus: () => {
|
|
108
118
|
handleMouseEnter();
|
|
109
119
|
if (typeof referenceElement.props.onFocus === "function") {
|