Blazor工具提示概述- Blazor的Telerik UI

的Blazor Tooltip组件在一个漂亮的跨浏览器弹出窗口中增强默认的浏览器工具提示。Tooltip组件允许自定义其大小、内容、位置和显示事件。将单个Tooltip实例附加到多个目标以优化性能。

的工具提示组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

的值将自动显示标题而且altHTML元素的属性。下面的示例演示了这个场景，但是也可以在模板中定义自定义内容．

附加到多个目标的基本工具提示

< TelerikTooltip TargetSelector = "。/> …和问号:   
 .

为了获得更好的性能，对于多个目标使用一个Tooltip实例，特别是在目标相似且数量很多的情况下。

位置

工具提示通常显示在其目标上方，但也可以显示在所有四个侧面。如果没有足够的空间，组件将自动移动或翻转其位置。学习如何控制工具提示位置．

默认情况下，工具提示显示在鼠标上方，但也可以这样做将其配置为在单击或点击时显示．

工具提示接受嵌套的<模板>标签，这是一个标准的BlazorRenderFragment．它允许您根据来自目标的元数据为工具提示生成内容。您还可以通过它根据需要获取工具提示内容的数据。看到工具提示模板文章中的示例．

工具提示提供以下配置参数。同时查看工具提示组件API．

参数	类型及默认值	描述
`类`	`字符串`	对象呈现自定义CSS类`< div class = " k-animation-container”>`元素的父元素(但不是父元素)`< div class = " k-tooltip >`元素。前者元素负责工具提示`位置`而且`z - index`风格。后一个元素应用主题样式(边框、背景等)。使用CSS类覆盖主题样式．这是一个自定义工具提示样式示例．
`高度`	`字符串`	中应用高度样式任何支持单元．默认情况下，组件将根据其内容展开。不使用百分比值-使用`大众`而且`vh`单位代替。
`Id`	`字符串`	呈现一个`id`属性的`< div class = " k-tooltip >`元素。要改善可访问性和屏幕阅读器行为，请将相同的字符串设置为Tooltip`Id`而且`aria-described-by`所有工具提示目标的属性。
`位置`	`TooltipPosition`枚举（`前`）	设置工具提示弹出方向，关于它的目标。
`ShowOn`	`TooltipShowEvent`枚举（`徘徊`）	设置浏览器事件，该事件将触发显示工具提示．
`TargetSelector`	`字符串`	CSS选择器或选择符，它指向一个或多个工具提示目标。
`宽度`	`字符串`	中应用宽度样式任何支持单元．默认情况下，组件将根据其内容展开。不使用百分比值-使用`大众`而且`vh`单位代替。

若要让工具提示根据其内容拉伸，请离开这两个的宽度而且高度参数是空的。如果其中一个有值，HTML元素将有一些布局，您可能会在大小和位置方面得到意想不到的结果。

如果你愿意按需加载大内容，你应该设置尺寸，以适应预期的内容和布局。