工具提示是GUI（图形用户界面）元素，当鼠标指针悬停在GUI中的项目上并提供一些上下文信息或说明时，它通常会弹出。
我正在开发一种设计，用户可以单击 Glyphicon 锚点，它将文本复制到剪贴板。我希望单击按钮时工具提示会发生变化。所以当它们悬停在...
通过 AppleScript 或 JavaScript 在可编写脚本的 macOS 应用程序中设置 toolTip 属性
根据 toolTip 开发人员文档，我想知道：是否可以（通过 osascript 运行的 AppleScript 或 JavaScript）告诉当前最前面的应用程序（如果应用程序可编写脚本）
ExtJS 6.2：动态添加 afterLabelTextTpl
我正在尝试在各个字段后动态添加一个图标以用作帮助（例如，当用户将鼠标悬停在图标上时，会出现工具提示）。我试图使用 afterLabelTextTpl co 来做到这一点...
我有一个应用程序，我想在每次用户将焦点设置在条目小部件上时显示工具提示。 你知道一种强制显示 gtk 工具提示的方法吗？因为现在它只在...
监听 HTMLCollection 的变化（或实现类似的效果）
我需要创建一个简单的工具提示库，其工作原理如下： 每个具有特定属性组合的 DOM 元素（例如 class="tooltip"、data-tooltip-text="some text"）都会自动显示
工具提示不想位于底部。 我试过： Chart.defaults.global.tooltips.yAlign = '底部'; 和 选项={ 工具提示：{ yAlign: '底部' }, 没有帮助
我正在关注这个示例，发现表格需要相当长的时间来呈现工具提示。它似乎没有任何延迟，我已经尝试了 defaultBrowserTooltip 作为 w...
我发现自己又在工具提示上苦苦挣扎了。我添加了一个输入来执行搜索，当我执行任何搜索并尝试查看工具提示时，我只看到容器（及其背景颜色，bo...
我使用 XAML（资源字典）创建了一个像这样的自定义工具提示样式 <question vote="0"> <p>我使用 XAML（资源字典）创建了一个像这样的自定义工具提示样式</p> <pre><code><ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Style TargetType="ToolTip"> <Setter Property="Background" Value="#404040" /> <Setter Property="Foreground" Value="#FFFFFF" /> <Setter Property="Placement" Value="Bottom" /> <Setter Property="HasDropShadow" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToolTip"> <Grid> <Path Width="12" Height="8" Margin="6,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Data="M9.6 4.53333C9.8 4.26667 10.2 4.26667 10.4 4.53333L16 12H4L9.6 4.53333Z" Fill="#404040" Stretch="Fill" /> <Border Margin="0,10,0,0" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" CornerRadius="3"> <TextBlock Padding="8" FontSize="12" FontWeight="Normal" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" TextWrapping="Wrap" /> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </code></pre> <p>当应用程序完全最大化并且当我将鼠标悬停在位于屏幕右端的最后一个按钮上时，工具提示并不正好位于按钮正下方，我需要在这里修复什么？</p> <p>问题： 黄色箭头是我将鼠标悬停的位置，工具提示样式的小三角形没有出现在按钮正下方。 <a href="https://i.sstatic.net/DdwJoS84.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvRGR3Sm9TODQucG5n" alt="enter image description here"/></a></p> <p>对于其他按钮： <a href="https://i.sstatic.net/v8sSz3co.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvdjhzU3ozY28ucG5n" alt="enter image description here"/></a></p> </question> <answer tick="false" vote="0"> <p>这不是问题的答案，而是表明该问题没有足够的细节来回答。</p> <blockquote> <p>@EldHasp，当我将应用程序窗口状态更改为最大化状态时，就会发生此问题。将任何控件放在窗口末尾，最大化屏幕后，您可以看到此问题。</p> </blockquote> <p><a href="https://i.sstatic.net/IxUN7g5W.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSXhVTjdnNVcucG5n" alt="enter image description here"/></a></p> <p><a href="https://i.sstatic.net/xW9LlKiI.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQveFc5TGxLaUkucG5n" alt="enter image description here"/></a></p> </answer> </body></html>
当鼠标的流动站超出数据集放置位置时，将显示 2 个数据集圆环图的工具提示
我有一个使用 Chart.js 4.4.1 实现的圆环图。该图表有 2 个数据集，一个位于外部数据集圆环中，另一个位于内部数据集圆环中。 每个数据集都有自己的...
如何使用Bootstrap让eCharts工具提示在页面中完全可见
我试图为一些 eCharts 图表实现 Bootstrap 5.x 设计。 但工具提示超出了页面范围，只有部分内容可见。 代码太长，无法放入 stackoverflow 片段中...
我的 React 应用程序中有这个按钮： this.state.disableButton... 我的 React 应用程序中有这个 Button： <Button onClick={this.showReissue} primary={true} fullWidth={false} disabled={this.state.disableButton} > this.state.disableButton 是一个 boolean 值。 有什么方法可以添加仅在禁用按钮时才激活的工具提示吗？ 我想应该是这样的 <Tooltip title={disableButton == true ? "" : "test"}> <Button variant="outlined" onClick={showReissue} primary={true} fullWidth={false} disabled={disableButton} > Test </Button> </Tooltip> 这里有一个尝试的链接（我使用了MUI，但逻辑是相同的） https://codesandbox.io/s/exciting-germain-dumokw?file=/src/App.js:373-651 我从这个答案中得到启发 只需将相同的条件添加到 title 属性即可 <Button onClick={this.showReissue} primary={true} fullWidth={false} disabled={this.state.disableButton} title={this.state.disableButton ? "your tooltip":""}> >
我尝试单击任何单元格以获取单元格旁边的工具提示，但在获取正确的坐标方面遇到了很多麻烦。我经历了它，但没有一个解决方案有效。什么...
我试图单击任何单元格以获取单元格旁边的工具提示，但在获取正确的坐标时遇到很多麻烦。我经历了 ia，但没有一个解决方案有效。什么...
下拉菜单中的 Jetpack Compose 工具提示不跟随锚点
我正在编写一个类似于位于右下角的FAB的按钮，它的工作原理应该是这样的： 单击按钮 -> 弹出带有“信息”图标的下拉菜单 -> 单击 ...
我有这个组件。当代码被注释时，ItemRenderer (MudPaper) 会采用父级 (MudDropZone) 的 100% 宽度。但是当我取消注释代码并在悬停时添加显示说明时，它会停止填充 100...
使用多个 data-bs-toggle（模式和工具提示）的最佳实践是什么？
我有几个带有模式和工具提示的链接。 我有几个带有模式和工具提示的链接。 <a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></span></a> 工具提示位置从图标开始，而不是从按钮侧开始。 但是如果我改变模态和工具提示的位置，那么btn-group不起作用，但工具提示看起来是需要的 您可以与我分享使用多个data-bs-toggle的最佳实践吗？ 您可以反转放置：将链接放入span中： <span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a></span> 或者，您可以使用 JS 来实例化模态（因为您已经使用 JS 来启动工具提示）： <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a> const modal = new bootstrap.Modal('#link_delete_modal'); document.querySelector('#modalBtn').addEventListener('click', () => { modal.toggle(); }); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body class="p-5 m-5"> <div class="btn-group" role="group" aria-label="Basic example"> <span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a></span> <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a> </div> <!-- Modal --> <div class="modal fade" id="link_delete_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> const modal = new bootstrap.Modal('#link_delete_modal'); document.querySelector('#modalBtn').addEventListener('click', () => { modal.toggle(); }); document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip); }); </script> </body> </html>
使用多个 data-bs-toggle（模式和工具提示）的最佳实践是什么？
我有几个带有模式窗口的链接并包含标题。 我有几个带有模式窗口的链接并包含标题。 <a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></span></a> 但是我的工具提示是从图标开始的，而不是从按钮侧开始。 但是如果我改变模态和工具提示的位置，那么 btn-group 不起作用，但工具提示看起来需要 SO 可以与我分享使用多个 data-bs-toggle 的最佳实践吗？ 您可以反转放置：将链接放入span中： <span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a></span> 或者，您可以使用 JS 来实例化模态（因为您已经使用 JS 来启动工具提示）： <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a> const modal = new bootstrap.Modal('#link_delete_modal'); document.querySelector('#modalBtn').addEventListener('click', () => { modal.toggle(); }); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body class="p-5 m-5"> <div class="btn-group" role="group" aria-label="Basic example"> <span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a></span> <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a> </div> <!-- Modal --> <div class="modal fade" id="link_delete_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> const modal = new bootstrap.Modal('#link_delete_modal'); document.querySelector('#modalBtn').addEventListener('click', () => { modal.toggle(); }); document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip); }); </script> </body> </html>
我的窗格上安装了一个工具提示，该提示应该仅显示在某个多边形（最后一个）上。但工具提示却显示在每个图块上。我怎样才能改变这一点？这是复制品...
我开始认为这是不可能的，但我已经看到了多个在没有可滚动元素的情况下工作的例子。我想让工具提示元素显示超出滚动条的范围...