Tool Tip
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
Usage
We can use tool tip with different components of nile
Text Area
<nile-tooltip content="I am text area" >
<nile-textarea></nile-textarea>
</nile-tooltip>Progress Bar
<nile-tooltip content="I am Progress Bar" >
<nile-progress-bar value="80"></nile-progress-bar>
</nile-tooltip>Attributes & Properties
| Name | Description | Type | Default |
|---|---|---|---|
| content | The tooltip's content. If you need to display HTML, use the `content` slot instead. | String | '' |
| size | Decide the tool tip size. | 'small'|'large' | small |
| placement | The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | top |
| disabled | Disables the tooltip | Boolean | false |
| distance | The distance in pixels from which to offset the tooltip away from its target. | number | 0 |
| trigger | triggers for activating tooltip | trigger event names in string spaced | 'hover focus' |
| open | Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. | Boolean | false |
| skidding | The distance in pixels from which to offset the tooltip along its target. | number | 0 |
| hoist | Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,scenarios. | Boolean | false |
Events
| Name | Description | Event Detail |
|---|---|---|
| nile-show | Emitted when the tooltip starts to open (just after opening). | - |
| nile-after-show | Emitted when the tooltip finishes opening.(after animation) | - |
| nile-hide | Emitted when the tooltip starts to hide. | - |
| nile-after-hide | Emitted when the tooltip finishes hideing.(after animation) | - |
Slots
| Name | Description |
|---|---|
| (default) | The toolkit main Content |
| content | Name of the toolkit |
Dependencies
nile-popup