tooltip 相关问题

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

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

C# WPF 滑块 AutoToolTipPlacement 样式

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

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 代替。

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

我有 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

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

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

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

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

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

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

为什么 QToolTips 不会出现在 QMenu 内的 QActions 上

我正在做一个使用 PySide 编写的 GUI 的应用程序。我在 QPushButton 上设置了 QMenu，通过 QMenu.addAction 添加了几个 QAction。为了进一步向用户解释这些操作，我在其中添加了 QToolTip...

组件（工具提示）优先于其他组件

请注意，我正在使用 React。 我正在尝试向“.preview”组件添加一个工具提示，该组件基本上是一个带有字母的小盒子（小盒子代表了...

工具提示不适用于使用 Jquery 动态创建的元素

我使用 Ajax 响应创建了一些动态 html 元素（垃圾邮件、div）。我已将工具提示代码放置在这些元素上，但它似乎没有包含任何工具提示。 这是我的代码...

Qt QGraphicsView - 工具提示不出现

我正在使用 QGraphicsView 在 PyQt 中创建 2D 视图。不幸的是，我似乎找不到任何方法让工具提示出现在任何级别 - 在 QGraphicsItems、QGraphicsItemGroups 等上。 是

如何在highcharts.js中放置标签工具提示

就像图表上的各个点有工具提示一样，例如在折线图中，我希望在将鼠标悬停在标签上时也有一些工具提示。最简单的方法是什么...

如何使用 javascript 删除移动设备上点击时的焦点/悬停状态

我有一个悬停时出现的工具提示。问题是，为了删除移动设备中的焦点/悬停状态，您必须单击 .explanation div 外部。我想让你也可以...

amCharts 5 工具提示未显示在线条系列上

我正在尝试获取显示此折线图和数据集的工具提示，每次我输入自己的数据时，它都会删除折线图，并且我在文档中找不到任何关于为什么会这样的内容

如何向 jtable 中的单元格添加工具提示？

我有一个表格，其中每一行代表一张图片。在“路径”列中，我存储其绝对路径。字符串有点长，我希望当我将鼠标悬停在特定单元格上时，也...

为什么我的范围滑块的工具提示超出预期并出现意外的显示故障？

所以，在我的 Bootstrap 5 模式中，我有一个范围滑块。我向三个动态范围滑块添加了工具提示。添加它们后，工具提示溢出到右侧（显示不正确）。我参加...

为什么我的范围滑块的工具提示显示不正确？

所以，在我的 Bootstrap 5 模式中，我有一个范围滑块。我向三个动态范围滑块添加了工具提示。添加它们后，工具提示溢出到右侧（显示不正确）。我参加...

使工具提示覆盖 div 高度与文本非父级相同

我正在实现一个显示在父元素上的工具提示，但是当显示工具提示（额外信息）时，边框框的大小与父元素相同，在这种情况下只有一行...

如何在不使用任何图片的情况下在div中设计以下效果

如何在不使用任何图像的情况下像上面一样设计底部的提示。 下面是我的跟踪代码： 提示：上传您的... 如何在不使用任何图像的情况下像上面一样设计底部的提示。 以下是我的跟踪代码： <div id="coverImageToolTip"><p><font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE <div id="tail1"></div> <div id="tail2"></div> #coverImageToolTip { position: absolute; z-index: 10; padding: 0px 4px; background-color: gray; bottom: 100px; left: 20%; border-radius: 10px; font-weight: bold; border-bottom: 5px solid black; } /* #tail1 { position:absolute; bottom:100px; left:20px; width:0;height:0; border-color:#a0c7ff transparent transparent transparent; border-width:10px; border-style:solid; } */ #tail2 { position:absolute; bottom:-18px; left:20px; width:0;height:0; border-color: red transparent transparent red ; border-width:10px; border-style:solid; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } 最小标记版本： 2024年答案 我们可以在下面的透明边框区域中创建带有 conic-gradient() 的工具提示尾部。然后我们使用 filter: drop-shadow() 创建跟随整个形状的阴影。我们将这些样式设置在工具提示后面的绝对定位伪上，因为我们不希望阴影也应用在关闭按钮上。 /* just to close tooltip from button */ addEventListener('click', e => { let _t = e.target; if(_t.getAttribute('aria-label') === 'close') { _t.parentNode.classList.add('closed') } }); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); html, body, button { display: grid } html { height: 100% } body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) } .tooltip { --r: 5px; /* tooltip corner rounding */ --h: 1.25em; /* arrow height */ --c: #999; /* tooltip background */ place-self: center; position: relative; margin-bottom: var(--h); /* reserve arrow space */ padding: .25em; width: 8em; font: 700 2em/ 1.375 oswald, sans-serif; text-align: center; text-transform: uppercase; &::before { position: absolute; z-index: -1; inset: calc(-1*var(--h)); /* increase background area with transparent border */ border: solid var(--h) #0000; border-radius: calc(var(--h) + var(--r)); background: /* main box, restricted to padding-box */ linear-gradient(var(--c) 0 0) padding-box, /* tooltip tail, within all border-box */ conic-gradient( from 20deg /* tail start angle */ at 43% /* horizontal tail tip position */ 100%, var(--c) 30deg /* angular size of tail */, #0000 0%) 0 100% /* place at the bottom *// 50% 50% no-repeat /* limit size & repetition so no overflow */ border-box; filter: drop-shadow(0 6px #434343); content: '' } } .closed { display: none } .highlight { color: #fff } /* prettify close button from here on */ button { position: absolute; top: 0; right: 0; padding: 0; width: 1.125em; aspect-ratio: 1; border: solid 4px currentcolor; border-radius: 50%; translate: 50% -50%; background: #030303; color: var(--c); font: inherit; &::before, &::after { grid-area: 1/ 1; place-self: center; width: .625em; height: 4px; border-radius: 3px; rotate: -45deg; background: currentcolor; content: '' } &::after { rotate: 45deg } } <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'></button> <div> 如果尾部锯齿状令人不安，我们可以在 filter 之前使用自定义 SVG drop-shadow() 来平滑它。 addEventListener('click', e => { let _t = e.target; if(_t.getAttribute('aria-label') === 'close') { _t.parentNode.classList.add('closed') } }); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); html, body, button { display: grid } html { height: 100% } body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) } svg[height='0'] { position: fixed; } .tooltip { --r: 5px; /* tooltip corner rounding */ --h: 1.25em; /* arrow height */ --c: #999; /* tooltip background */ place-self: center; position: relative; margin-bottom: var(--h); /* reserve arrow space */ padding: .25em; width: 8em; font: 700 2em/ 1.375 oswald, sans-serif; text-align: center; text-transform: uppercase; &::before { position: absolute; z-index: -1; inset: calc(-1*var(--h)); /* increase background area with transparent border */ border: solid var(--h) #0000; border-radius: calc(var(--h) + var(--r)); background: /* main box, restricted to padding-box */ linear-gradient(var(--c) 0 0) padding-box, /* tooltip tail, within all border-box */ conic-gradient( from 20deg /* tail start angle */ at 50% /* horizontal tail tip position */ 100%, var(--c) 35deg /* angular size of tail */, #0000 0%) 0 100% /* place at the bottom *// 100% 50% no-repeat /* limit size & repetition so no overflow */ border-box; filter: blur(2px) url(#smooth) drop-shadow(0 6px #434343); content: '' } } .closed { display: none } .highlight { color: #fff } /* prettify close button from here on */ button { position: absolute; top: 0; right: 0; padding: 0; width: 1.125em; aspect-ratio: 1; border: solid 4px currentcolor; border-radius: 50%; translate: 50% -50%; background: #030303; color: var(--c); font: inherit; &::before, &::after { grid-area: 1/ 1; place-self: center; width: .625em; height: 4px; border-radius: 3px; rotate: -45deg; background: currentcolor; content: '' } &::after { rotate: 45deg } } <svg width='0' height='0'> <filter id='smooth' color-interpolation-filters='sRGB'> <feComponentTransfer> <feFuncA type='gamma' amplitude='4' exponent='3' offset='-.5'> </feComponentTransfer> </filter> </svg> <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'></button> <div> 原始答案，出于网络历史记录原因而保留： body { background: lightblue; } .tooltip { position: relative; margin: 1em auto; padding: .5em .2em; width: 10.5em; height: 3em; border-radius: .25em; box-shadow: 0 .2em 0 black; background: #999; font: 700 1.6em/1.5 sans-serif; text-align: center; text-transform: uppercase; } button { position: absolute; top: -.75em; right: -.75em; border: solid .2em; width: 1.5em; height: 1.5em; border-radius: 50%; background: black; color: #999; font: 900 .65em/1 sans-serif; text-align: center; } .tooltip:after { position: absolute; z-index: -1; right: 25%; bottom: -.75em; width: 2em; height: 2em; box-shadow: 0 .35em 0 black; transform: rotate(30deg) skewY(-60deg); background: inherit; content: ''; } .highlight { color: white; } .highlight:after, .highlight:before { position: absolute; top: 100%; right: 31.025%; width: 1.725em; height: .2em; transform: skewX(-30deg); background: #999; content: ''; } .highlight:after { right: 30.65%; transform: skewX(-60deg); } <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'>x</button> <div> 请参阅纯CSS关闭按钮（CSS中的关闭按钮）和http://v2.desandro.com/resources/css-speech-bubble-icon/了解实际踪迹。 您可以在CSS中执行关闭按钮和箭头，但箭头的阴影是不可能的。 看下面的代码 HTML <div id="coverImageToolTip"> <div class="close"><a href="#">X</a></div> <p> <font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE </p> <div id="tail1"></div> <div id="tail2"></div> </div> CSS .close a{ position:absolute; right:-5px; top:-8px; display:inline-block; background:black; padding:2px 6px; color:white; border:solid grey 3px; border-radius:22px; font-size:12px; text-decoration:none } #tail2 { position:absolute; bottom:-19px; left:80px; width:0;height:0; border-color: grey transparent transparent grey ; border-width:10px; border-style:solid; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(1deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } 演示 您可以使用 before 和 after 模拟接近图像的箭头形状。看看这个演示：http://jsfiddle.net/j34um/3/

Bootstrap 5 - 按钮上的下拉菜单和工具提示？

尝试向已使用 data-bs-toggle 的 btn （或任何其他标签）添加工具提示 - 我能得到的最佳结果如下： 函数 xmdEnableTooltips() { 让 tooltipTriggerList = [].sl...