工具提示

工具提示功能集成在各种 PrimeReact 组件中。

导入#


import { Tooltip } from 'primereact/tooltip';
         

位置#

表单组件通过 tooltip 属性具有内置支持，并且通过 tooltipOptions 提供诸如定位之类的自定义设置。


<InputText type="text" placeholder="Right" tooltip="Enter your username" />
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
         

事件#

默认情况下，工具提示会在悬停事件时显示，使用 event 选项将 focus 或 both 设置为替代方案。


<InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
<InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
<InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
         

自动隐藏#

当鼠标离开目标元素时，工具提示会隐藏。在需要与工具提示交互的情况下，将 autoHide 设置为 false 以更改默认行为。


<InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
<InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
         

延迟#

通过 showDelay 和 hideDelay 选项分别定义添加到显示和隐藏事件的延迟。


<Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
         

目标#

独立的 Tooltip 组件可以使用 target 属性附加到任何元素，该属性接受有效的查询选择器。在这种情况下，需要使用 data-pr 属性定义内容和选项。


<Tooltip target=".custom-target-icon" />

<i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
    data-pr-tooltip="No notifications"
    data-pr-position="right"
    data-pr-at="right+5 top"
    data-pr-my="left center-2"
    style={{ fontSize: '2rem', cursor: 'pointer' }}>
    <Badge severity="danger"></Badge>
</i>
         

鼠标跟踪#

启用 mouseTrack 选项后，工具提示的位置会根据指针坐标进行更新。


<Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />

<Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
<img className="logo" alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
         

响应式#

工具提示内容是响应式的，可以反映与目标组件相关的更改。


<Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />

<Tooltip target=".knob" content={`${knobValue}%`} />
<Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />

<Tooltip target=".slider>.p-slider-handle" content={`${sliderValue}%`} position="top" event="focus" />
<Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
         

禁用#

由于标准行为，禁用的元素不会触发用户交互。对此类情况的常见解决方法是将禁用的元素包装在另一个附加了工具提示的元素中。如果工具提示是组件内置的，则启用 showOnDisabled 选项。


<Tooltip target=".disabled-button" />
<span className="disabled-button" data-pr-tooltip="Disabled">
    <Button type="button" label="Save" icon="pi pi-check" disabled />
</span>

<Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
         

模板#

可以使用 content 属性或将内容嵌套为子元素，将自定义内容放置为工具提示值。


<Tooltip target=".custom-tooltip-btn">
    <img alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
</Tooltip>

<Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
         

可访问性#

屏幕阅读器

工具提示组件使用 tooltip 角色，并且当它变为可见时，工具提示的生成 ID 将定义为目标的 aria-describedby。

键盘支持

按键功能
escape当焦点位于目标上时，关闭工具提示。
                        PrimeReact 10.9.1 由 PrimeTek 提供