@clayui/tooltip 3.47.0 → 3.55.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/README.md +19 -0
- package/package.json +3 -3
- package/README.mdx +0 -45
package/README.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# `@clayui/tooltip`
|
|
2
|
+
|
|
3
|
+
Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.
|
|
4
|
+
|
|
5
|
+
- [Documentation](https://clayui.com/docs/components/tooltip.html)
|
|
6
|
+
- [Changelog](./CHANGELOG.md)
|
|
7
|
+
- [Breaking change schedule](./BREAKING.md)
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
Run `yarn`
|
|
12
|
+
|
|
13
|
+
```shell
|
|
14
|
+
yarn add @clayui/tooltip
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Contribute
|
|
18
|
+
|
|
19
|
+
We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/tooltip",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.55.0",
|
|
4
4
|
"description": "ClayTooltip component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@clayui/shared": "^3.
|
|
29
|
+
"@clayui/shared": "^3.55.0",
|
|
30
30
|
"classnames": "^2.2.6",
|
|
31
31
|
"warning": "^4.0.3"
|
|
32
32
|
},
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"browserslist": [
|
|
39
39
|
"extends browserslist-config-clay"
|
|
40
40
|
],
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "5310f4650d453a3659b0bc73a5f098732168c9c1"
|
|
42
42
|
}
|
package/README.mdx
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: 'Tooltip'
|
|
3
|
-
description: 'Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.'
|
|
4
|
-
lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/'
|
|
5
|
-
packageNpm: '@clayui/tooltip'
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
import {
|
|
9
|
-
Tooltip,
|
|
10
|
-
TooltipProvider,
|
|
11
|
-
TooltipProviderRenderer,
|
|
12
|
-
} from '$packages/clay-tooltip/docs/index';
|
|
13
|
-
|
|
14
|
-
<div class="nav-toc-absolute">
|
|
15
|
-
<div class="nav-toc">
|
|
16
|
-
|
|
17
|
-
- [TooltipProvider](#tooltipprovider)
|
|
18
|
-
- [contentRenderer](#contentrenderer)
|
|
19
|
-
|
|
20
|
-
</div>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
Simplest way of using Tooltip is by leveraging it's `show` prop and specifying `alignPosition` to determine it's position relative to the element it's aligned to.
|
|
24
|
-
|
|
25
|
-
If you have multiple Tooltips on the page, [TooltipProvider](#tooltipprovider) allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.
|
|
26
|
-
|
|
27
|
-
<Tooltip />
|
|
28
|
-
|
|
29
|
-
## TooltipProvider
|
|
30
|
-
|
|
31
|
-
By using the `<TooltipProvider>` it allows you to add the desired tooltip content on each element as a data attribute.
|
|
32
|
-
|
|
33
|
-
Here's a list of html attributes that you can provide to children elements of the TooltipProvider:
|
|
34
|
-
|
|
35
|
-
- `title` is for the tooltip content.
|
|
36
|
-
- `data-tooltip-align` is for alignment direction.
|
|
37
|
-
- `data-tooltip-delay` is for the delay(ms) before showing the tooltip.
|
|
38
|
-
|
|
39
|
-
<TooltipProvider />
|
|
40
|
-
|
|
41
|
-
### contentRenderer
|
|
42
|
-
|
|
43
|
-
`contentRenderer` prop gives you the ability to format the content passed to the Tooltip via the `title` attribute to meet your requirements.
|
|
44
|
-
|
|
45
|
-
<TooltipProviderRenderer />
|