Тултип
PrimeNG/Tooltip (opens in a new tab)
Директива всплывающей подсказки предоставляет консультативную информацию для компонента.
С чего начать
Подключите модуль
import { TooltipModule } from 'primeng/tooltip';
Встройте компонент с помощью директивы pTooltip.
Positions
Focus and Blur
Button
Sizes
Свойства
Name | Type | Default | Description |
---|---|---|---|
pTooltip | string | null | Text of the tooltip. |
tooltipPosition | string | right | Position of the tooltip, valid values are right, left, top and bottom. |
tooltipEvent | string | hover | Event to show the tooltip, valid values are hover and focus. |
positionStyle | string | absolute | Type of CSS position. |
tooltipDisabled | boolean | false | When present, it specifies that the component should be disabled. |
appendTo | string | any | Target element to attach the overlay, valid values are "body", "target" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). |
hideDelay | number | null | Delay to hide the tooltip in milliseconds. |
showDelay | number | null | Delay to show the tooltip in milliseconds. |
life | number | null | Time to wait in milliseconds to hide the tooltip even it is active. |
tooltipStyleClass | string | null | Style class of the tooltip. |
escape | boolean | true | By default the tooltip contents are rendered as text. Set to false to support html tags in the content. |
tooltipZIndex | string | auto | Whether the z-index should be managed automatically to always go on top or have a fixed value. |
Стилизация
Name | Element |
---|---|
p-tooltip | Container element. |
p-tooltip-arrow | Arrow of the tooltip. |
p-tooltip-text | Text of the tooltip. |