tooltip 相关问题

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

如何在禁用的 HTML 按钮上呈现工具提示

我有一个 HTML 按钮。我尝试根据按钮的“标题”属性在其上渲染工具提示,但它没有渲染。主要是因为它被禁用了。 然后我尝试将按钮包裹在...

回答 3 投票 0

用 Layer Cake 制作的 Svelte 图表上有工具提示吗?

我正在尝试向我使用 Layer Cake(Svelte 的图形框架)制作的图表添加工具提示。我查看了 Layer Cake 网站上的地图示例,因为该示例有工具提示,但我无法弄清楚...

回答 2 投票 0

当光标移开时,MudTooltip 并不总是消失

我在 Blazor Web 应用程序(.NET 8、MudBlazor 6.18.0、Chrome)中使用 MudTooltip。 当我将鼠标悬停在菜单图标上时,会出现工具提示。 右键单击同一菜单图标并在新选项卡中打开它。 回去吧...

回答 1 投票 0

Visual Studio 免费插件或 resharper 插件可在工具提示中显示常量值

是否有免费的插件或 resharper 插件,当您将鼠标悬停在对常量值的引用上时,可以让我看到常量值的实际值? 由于编译器强制 const 字段或属性...

回答 4 投票 0

使用样式化组件自定义 antd 工具提示样式

我正在尝试为 antd 工具提示组件自定义宽度:链接到文档 如何才能做到这一点 ? 从“反应”导入反应; 从“react-dom”导入ReactDOM; 导入“antd/d...

回答 4 投票 0

tkinter 工具提示在 Windows 10 企业版中总是不显示

尝试第一个基本示例 将 tkinter 导入为 tk 将 tkinter.ttk 导入为 ttk 从 tktooltip 导入工具提示 应用程序 = tk.Tk() b = ttk.Button(应用程序,文本=“按钮”) BP...

回答 1 投票 0

如何在 Chrome 中的工具提示的 html 标题属性中使用制表符

我在 HTML 标题属性中使用制表符来显示在工具提示中,这在 Firefox (112.0.2) 中按我的预期工作。然而,在 Chrome (112.0.5615.138) 中,情况并非如此,它似乎...

回答 1 投票 0

CSS:侧边栏工具提示斗争

我正在开发一个项目,其中有一个侧边栏,当它折叠时,悬停时会出现一个工具提示。但是,当 .sidebar-item-container 的位置设置为相对且 .sidebar-item-name 的

回答 1 投票 0

AG Grid JS - 仅在标题图标悬停时触发工具提示

我已经在Ag Grid 上搜索过这个问题的解决方案。我想要一个包含工具提示图标的普通标题。当用户仅将鼠标悬停在图标上时 = 触发工具提示。现在...

回答 1 投票 0

如何在Bootstrap Tooltip中添加标签表

我初始化对象如下 $('[data-toggle="tooltip"]').tooltip({ 容器:“身体”, html:正确, 标题:函数(){ 返回'text1 我按如下方式初始化对象 $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, title: function () { return '<u>text1</u><table class="table"><tr><td>text2</td></tr></table>'; } }); 但我只看到text1。 是否可以在工具提示中插入表格? 我在 Github 上发现了一个 问题,指出 Bootstrap 的消毒剂导致了这个问题。 您需要做的是允许用于您的表的所有元素都在白名单中(也tbody,这不是由您的代码定义的,但似乎您需要它)。另请看一下这个question,它是为弹出窗口完成的。之后,您可以再次在 tooltip 选项中使用此自定义白名单。 我创建了一个运行的小提琴: var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList; myDefaultWhiteList.table = ['class']; myDefaultWhiteList.tbody = []; myDefaultWhiteList.tr = []; myDefaultWhiteList.td = []; $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, whiteList: myDefaultWhiteList, title: function () { return '<u>text1</u><table class="table text-light"><tr><td>text2</td></tr></table>'; } }); <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <button class="ml-5 mt-5 btn btn-primary" data-toggle="tooltip"> Test </button> 您可能会注意到,这是 Bootstrap 不建议的行为。我建议使用 Bootstrap 的弹出框来处理较大的内容,例如表格。 祝你好运! 我相信工具提示的内容已添加到您要应用工具提示的元素的标题属性中。要分解它,本质上你想做的是...... <div data-toggle="tooltip" title="<u>text1</u><table class="table"><tr><td>text2</td></tr></table>"> Foo </div> $('[data-toggle="tooltip"]').tooltip(); 如果您想在表格中包含信息作为工具提示,我认为您必须创建一个包含表格的元素,将其正确放置在您想要悬停的元素附近,并使用 $.hover 来显示和隐藏元素。类似的东西 $('#hoverTest').hover(function(){ $('#customTooltip').removeClass('hideme'); }, function(){ $('#customTooltip').addClass('hideme'); }); table, th, td { border: 1px solid black; } .hideme{ display:none } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="hoverTest">Hover here</div> <div id="customTooltip" class="hideme"> <table> <th>Col1</th> <th>Col2</th> <tr> <td>Cell1</td> <td>Cell2</td> </tr> </table> </div> jquery 最简单的技巧。 http://jsfiddle.net/b80tn4hx/3/ $('a').hover(function(ev){ $('.tablediv').stop(true,true).fadeIn(); },function(ev){ $('.tablediv').stop(true,true).fadeOut(); }).mousemove(function(ev){ $('.tablediv').css({left:ev.layerX+10,top:ev.layerY+10}); }); .container{ padding: 15px; } .tablediv{ display:none; position:absolute; background: #999; padding: 5px; border: 1px solid red; } td{ border:1px solid #777; padding: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <a href="#">test</a> <div class="tablediv"> <table> <tr><td>asdf</td><td>gsdi</td></tr> <tr><td>asdf</td><td>gsdi</td></tr> </table> </div> </div> 看起来 whiteList 现在是一个 allowList 并且不再那么“隐藏”。 工具提示标题中有使用 table、tbody、td 等所需的 javascript 代码示例。 https://getbootstrap.com/docs/5.2/getting-started/javascript/#sanitizer 我希望这有帮助。

回答 4 投票 0

如何在可滚动元素中使用工具提示?

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

回答 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 不完整,我无能为力。

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 2 投票 0

设置 Angular Material Tooltip 的字体大小

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

回答 13 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.