-
Notifications
You must be signed in to change notification settings - Fork 455
/
SfTooltip.tsx
57 lines (54 loc) · 1.69 KB
/
SfTooltip.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { SfTooltip, type SfTooltipProps, SfPopoverPlacement, SfPopoverStrategy } from '@storefront-ui/react';
import { prepareControls } from '../../components/utils/Controls';
import ComponentExample from '../../components/utils/ComponentExample';
import { ExamplePageLayout } from '../examples';
function Example() {
const { state, controls } = prepareControls<SfTooltipProps>(
[
{
type: 'text',
modelName: 'label',
propType: 'string',
description: 'Set label value',
},
{
type: 'select',
options: Object.keys(SfPopoverPlacement),
modelName: 'placement',
propType: 'SfPopoverPlacement',
propDefaultValue: SfPopoverPlacement.top,
description: 'Initial position of tooltip in reference to trigger',
},
{
type: 'select',
modelName: 'strategy',
propType: 'SfPopoverStrategy',
propDefaultValue: SfPopoverStrategy.absolute,
options: Object.values(SfPopoverStrategy),
description: 'Tooltip positioning strategy',
},
{
type: 'boolean',
modelName: 'showArrow',
propType: 'boolean',
description: 'Show pointer arrow',
propDefaultValue: false,
},
],
{
label: 'Tooltip text',
placement: SfPopoverPlacement.top,
strategy: SfPopoverStrategy.absolute,
showArrow: false,
},
);
return (
<ComponentExample controls={{ state, controls }} componentContainerClassName="flex justify-center items-center">
<SfTooltip {...state.get}>
<span>Hover me!</span>
</SfTooltip>
</ComponentExample>
);
}
Example.getLayout = ExamplePageLayout;
export default Example;