Tooltip
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Default
The default form of a tooltip.
Hello World
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export default () => (
<Tooltip content="Hello World">
<Button appearance="primary">Hover over me</Button>
</Tooltip>
);
Positioning
The tooltip position is flexible and changes depending on how close the element is to the edge of the screen.
Top
Hello World
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => ( <
Tooltips content = "Hello World"
position = "top" >
<Buttons appearance = 'primary'> Hover over me < /Buttons>
</Tooltips>
); Bottom / Default
Hello World
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips content="Hello World" position="bottom">
<Buttons appearance='primary'>Hover over me</Buttons>
</Tooltips>
);
Left
Hello World
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips content="Hello World" position="left">
<Buttons appearance='primary'>Hover over me</Buttons>
</Tooltips>
);
Right
Hello World
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips content="Hello World" position="Right">
<Buttons appearance='primary'>Hover over me</Buttons>
</Tooltips>
);
Custom component
The tooltip component accepts a component prop, which enables users to customize the look and feel of the tooltip area.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips
content='Hello World'
position='right'
component={<Buttons appearance='primary'>Tooltip</Buttons>}
>
<Buttons appearance='primary'>Hover over me</Buttons>
</Tooltips>
);
Updating tooltip Content
Hello India
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips
content='Hello World'
position='right'
component={<Buttons appearance='primary'>Tooltip</Buttons>}
>
<Buttons appearance='primary'>Hover over me</Buttons>
</Tooltips>
);
Overflow
The tooltip text wraps when the content is wider than the max-width. Additionally, the text can be set to truncate, which is useful when displaying user-generated content of variable length.
The red panda (Ailurus fulgens), also called the lesser panda, the red bear-cat, and the red cat-bear, is a mammal native to the eastern Himalayas and southwestern China.
At the Cincinati Zoo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Tooltip from '@neoKit/tooltips';
import Buttons from "@neoKit/buttons";
export TooltipTopExample() => (
<Tooltips content='The red panda (Ailurus fulgens), also called the lesser panda, the red bear-cat, and the red cat-bear, is a mammal native to the eastern Himalayas and southwestern China.' truncate>
<img
alt='Red panda - smiling'
src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_Panda_in_a_Gingko_tree.jpg/220px-Red_Panda_in_a_Gingko_tree.jpg '
width='220'
/>
</Tooltips>
);