tooltip 相关问题

工具提示是GUI（图形用户界面）元素，当鼠标指针悬停在GUI中的项目上并提供一些上下文信息或说明时，它通常会弹出。

我有一个可以在 x 方向滚动的元素，其中包括工具提示： .nav-项目{ 宽度：120px； } .scroll-container { 宽度：100%；溢出-x：自动；溢出-y：隐藏；

html css tooltip scrollable

回答 1 投票 0

我有一个可以在 x 方向滚动的元素，其中包括工具提示：我有一个可以在 x 方向滚动的元素，其中包括工具提示： <div class="scroll-container"> <ul class="nav nav-tabs mt-4"> <div class="nav-item"> <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <span class="tooltip__content"> <a>Action 1</a> </span> </span> </div> </div> <div class="nav-item"> <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <span class="tooltip__content"> <a>Action 2</a> </span> </span> </div> </div> </ul> </div> 滚动容器的样式是： .scroll-container { width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #dee2e6; } 以及工具提示的样式： .tooltip { position: relative; display: inline-block; .button { margin: 0; } .tooltip__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; min-width: 120px; z-index: 2; display: block; margin-top: 10px; padding: 4px 8px; background: #445e5f; border-radius: 4px; font-size: 12px; color: #fff; text-align: center; text-transform: none; white-space: normal; font-weight: normal; visibility: hidden; opacity: 0; transition: all 0.25s ease-out; &:after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #445e5f; } &--wide { min-width: 240px; } } &:hover .tooltip__content { visibility: visible; opacity: 1; } } 这向我展示了这样的视图： Action 1 下方的小三角形是工具提示。如果我删除overflow-x:auto 和overflow-y:hidden 工具提示将按我预期的方式工作，但这次可滚动功能消失了。如何将可滚动（overflow-x：auto；和overflow-y：hidden；）和工具提示一起使用？这里是完整代码：https://jsfiddle.net/w6bfzduk/51/ 抱歉，您的 CSS 不完整，我无能为力。

html css sass tooltip scrollable

回答 1 投票 0

ApexCharts - “opts.ctx.rangeBar.getTooltipValues 不是函数”

我正在使用 ApexCharts 创建一个具有多个系列和分组行的时间线图表。它与位于此处的文档中的示例图表非常相似：https://apexcharts.com/javascript-chart-

javascript charts tooltip timeline apexcharts

回答 1 投票 0

图表 JS 工具提示标签间隔为 spaceBetween

我有一个堆叠条形图，其中工具提示显示标签：$value＆我希望将其设置为空格，这样标签左对齐，$value右对齐，允许...

javascript charts tooltip

回答 1 投票 0

无法强制 rc-tooltip 不透明度为 1

我们在 rc-tooltip 之上构建了工具提示，但即使使用我们的自定义 CSS，工具提示的不透明度似乎也不是 1。它仍然是半透明的。看图（可以看到文字...

css reactjs typescript tooltip

回答 2 投票 0

如何防止 JAWS 阅读器中的工具提示内容读取

我对多个输入元素使用工具提示，并在悬停和单击时在输入元素上显示工具提示。我需要阻止 JAWS 阅读器在悬停时阅读工具提示内容...

tooltip jaws-screen-reader

回答 2 投票 0

设置 Angular Material Tooltip 的字体大小

我对网络开发非常陌生，我不知道如何解决以下问题，尽管它可能很简单。我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：...

css angular tooltip angular-material angular-material2

回答 13 投票 0

散景悬停工具和工具提示无法正常工作

嗨，我刚刚得到了我想要的情节，并使用散景进行了一些帮助和调整；但是，我不知道如何将感兴趣的信息添加到我的工具提示导航/悬停工具中。

hover tooltip bokeh scatter-plot runumap

回答 1 投票 0

当鼠标悬停在 ssrs 中的图像上时，如何设置工具提示表达式中显示的文本格式？

我试图将鼠标悬停在图像上时在工具提示上显示描述性文本。然而，文本在屏幕上的窗口中显示为一条长线。如何添加换行符和 c...

text reporting-services tooltip

回答 2 投票 0

React 从子组件到父组件的重新渲染问题

我已经创建了一个单独的文件，用于将表 ID 复制到剪贴板和工具提示，当我复制多个图标时，我在悬停图标时遇到问题，前一个文件在此情况下不会更改为默认值...

reactjs tooltip render antd react-props

回答 1 投票 0

如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？

如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？我使用项目槽的原因是我想在项目上添加工具提示，但此后删除了复选框 &l...

vue.js vuetify.js tooltip v-autocomplete

回答 1 投票 0

C# WPF 滑块 AutoToolTipPlacement 样式

现在我陷入了如何设置滑块 AutoToolTipPlacement 中工具提示样式的困境。有什么方法可以做到吗？我需要能够更改工具提示的结构和文本。杜...

c# wpf slider tooltip

回答 1 投票 0

ngbTooltip - 在延迟期间取消工具提示外观

我在应用程序中的许多元素上使用 ngbTooltip。每个工具提示直接在 HTML 代码中初始化如下我在应用程序中的许多元素上使用 ngbTooltip。每个工具提示直接在 HTML 代码中初始化如下 <div ngbTooltip="my tooltip" container="body" placement="left" openDelay="1000" triggers="hover" (click)="doSomething()" > click me ! </div> 一切正常，除非用户在指定的延迟过去之前单击 HTML 元素。在这种情况下，GUI 被部分修改，用于触发工具提示的元素不再显示，但延迟后，工具提示仍然显示在屏幕左上角。单击按钮或不再显示触发元素时如何取消工具提示的出现？我的版本是： ng-bootstrap：16.0.0 和角度：17.1.0 在尝试了几乎所有方法之后，我使用 ngx-bootstrap 工具提示遇到了这个示例，它通过使用此属性解释并简单地解决了我的问题： triggers="mouseenter:click mouseenter:mouseleave" 我尝试用 ng-bootstrap 复制它，但失败了。所以我决定替换所有工具提示并使用 ngx-bootstrap 代替。

javascript angular tooltip ng-bootstrap

回答 1 投票 0

如何为数据网格添加工具提示并在工具提示中显示数据网格的转换值？

我有 DataGrid，DataGrid 列之一如下所示。我有 DataGrid，DataGrid 列之一如下所示。 <ig:TextColumn HeaderText="{Binding CARTONS, Source={StaticResource Messages}, Converter={StaticResource MessageConverter}}" Key="Column1" AllowToolTips="Always"> <ig:TextColumn.ToolTipContentTemplate> <DataTemplate> <TextBlock Text="{Binding Self}, Converter={StaticResource TransferColumnToCrlfDelimitedList}}"/> </DataTemplate> </ig:TextColumn.ToolTipContentTemplate> </ig:TextColumn> 问题是我需要显示将列的值转换为列的子值列表。我尝试使用 self.显然，这是行不通的。我该如何解决我的任务？有没有可能。去除自我仅使用 {Binding}，您将获得与父控件相同的 DataContext

wpf vb.net tooltip datagridcell

回答 1 投票 0

数据表插件中 csv 按钮的工具提示

是否有任何选项可以为数据表中的 csv 按钮提供工具提示？我关于这个 csv 按钮的代码如下： $('#example').dataTable( { “b处理”：正确， //“bServerSide”：true， “sAjaxSource”：“

button csv tooltip datatables

回答 2 投票 0

如何以编程方式将动画.tres添加到动画播放器（gui工具）？

是否可以通过编程方式同时将动画.tres加载到动画播放器（gui工具）？我知道动画是资源，我确实阅读了一些 godot 文档，但我没有找到任何与...相关的内容

animation tooltip gdscript godot3

回答 1 投票 0

Bootstrap 5.2 和 Popper JS 工具提示 - 禁用工具提示的溢出重新定位

有人可以给我一个如何使用 BootStrap5.x 制作工具提示的示例吗？它使用了 Popper JS，其中工具提示只是与关联元素保持在一起？不管是否...