tooltip 相关问题

如何在plot_ly地图的悬停文本中只有一个值

我正在尝试找出如何删除 R 中的plot_ly 地图弹出窗口中的所有额外信息，以便弹出窗口中仅显示国家/地区名称（地图名称）。我不需要 ISO 代码或编号...

删除 highcharter 地图工具提示中的“系列 1”文本

在我的交互式 Highcharter 地图中，我想删除工具提示中显示“Series 1”的文本，并将该部分留空。我还想去除冒号和 1

Bootstrap 5.x 工具提示在 AngularJS 控制器内不起作用

请允许我借用一些电台谈话白话：“长期听众；第一次来电。” 几天来我一直在尝试向我的网站添加一些工具提示，并且非常喜欢...

如何防止工具提示随着文本编辑器缩放而缩放？

您好，我更新到 VS 2022 社区版的 17.7.6 版本，注意到工具提示大小减小了。我意识到工具提示窗口和字体大小现在与文本编辑一起缩放......

有条件地激活 Material UI 工具提示？

我有以下使用 Material UI 的 React 组件： const MyButton = ({ warningText }) => ( 行动起来 我有以下使用 Material UI 的 React 组件： const MyButton = ({ warningText }) => ( <Tooltip title={warningText}> <Button>Do action</Button> </Tooltip> ) 目前，当 warningText 未定义时，这会显示一个空的工具提示。相反，我想根本不显示任何工具提示。在这些情况下有没有办法有条件地抑制工具提示？ 当然，我可以只使用 if 语句来不渲染工具提示组件，但在我看来，这会导致相当难看的代码。 应该是 <Tooltip title={warningText == null ? "" : warningText}> <Button>Do action</Button> </Tooltip> 文档说如果字符串长度为零，则不会显示。 https://material-ui.com/api/tooltip/ 工具提示标题。零长度标题字符串永远不会显示。 您可以使用 disableHoverListener 道具，如下所示： <Tooltip title={warningText} disableHoverListener={!warningText} > <Button>Do action</Button> </Tooltip> https://mui.com/material-ui/api/tooltip/#Tooltip-prop-disableHoverListener 如果您想手动尝试自定义，可以尝试使用以下解决方案： 根据 文档，您可以使用 open prop 和鼠标 events 手动处理。 在下面的场景中，我们将使用 state 设置当鼠标移到 element 上时显示工具提示，并且我们还将使用 text && 来断言 text 有值，这样可以防止当 text 为 undefined 时显示工具提示。 const [showTooltip, setShowTooltip] = useState(false); <Tooltip open={text && showTooltip} onMouseEnter={() => { setShowTooltip(true) }} onMouseLeave={() => { setShowTooltip(false) }} placement="top" title={text} > <div> {text} </div> </Tooltip> 注意，mui-tooltip 并不是一个完美的组件，也不是很直接，这个解决方案对我有用，但可能不适用于你的情况，我会尝试把它拿出来，你可以尝试让它在你身上发挥作用。 如果它不适合你，请发表评论，我会尽力帮助。 您应该看看https://material-ui.com/api/tooltip/ 有这样的选项 禁用焦点监听器 禁用悬停监听器 禁用触摸监听器 互动 我认为interactive={true}应该最适合您的需求 <Tooltip title={warningText} interactive={!warningText}>...</Tooltip>

通过点击为图像创建工具提示（html、scss）

我有一个带有点击 URL 的社交媒体图标。当有人将鼠标悬停在图标上时，我希望在其上显示一个句子（工具提示）。我使用了“标题”命令，它是......

GAS 对话框中的绝对定位工具提示（表情符号选择器）？

我的 GAS 脚本中有一个对话框，我想向其中添加表情符号选择器。 这是我选择的选择器：https://www.npmjs.com/package/emoji-picker-element#usage 一切都很顺利，直到行动那一刻......

React-js MUI 工具提示在单击时消失

MUI 工具提示的默认行为如下： 当打开工具提示的按钮/图标不在焦点上时，直接单击弹出窗口工具提示不会消失。 当按钮/...

多个 Material-UI 工具提示，在列表内单击时分别打开和关闭

我有一个反应组件内的产品列表。它们每个都有一个信息，单击时应在工具栏内单独显示： https://codesandbox.io/s/infallible-galois-tkj73?fil...

在带有省略号的表格单元格中显示工具提示：Ant Desing

我使用 Ant Design 库来渲染 Table 和 Tooltip 组件。如果您在表列设置中指定： 省略号：{ 显示标题：假， }, 渲染：（值）=>（ 我使用 Ant Design 库来渲染 Table 和 Tooltip 组件。如果您在表列设置中指定： ellipsis: { showTitle: false, }, render: (value) => ( <Tooltip placement="top" title={value}> <span>{value}</span> </Tooltip> ), 然后，当您将鼠标悬停在表格单元格上时，将显示工具提示。 如何让工具提示仅在有省略号时显示？如果没有省略号，则不会显示工具提示。 我尝试使用 useState，但它只适用于一个 html 元素，而我有很多这样的元素。 仅当 antd 中发现省略号时，请使用 Typography.Text 添加工具提示。 antdcodesandbox 非常不言自明。 针对类似需求，我对 antd 默认工具提示添加了样式更改，并使用 Typography.Text 进行条件显示。 但是如果您需要 antd Tooltip 组件本身，这个答案恐怕对您没有帮助。

表格单元格内的按钮不显示引导工具提示

我在值表中的每一行都有一个按钮，单击时会打开一个模式。我需要让按钮在鼠标悬停和获取焦点时显示工具提示。这是

如何实现人力车图例的工具提示？

我正在使用 Rickshaw 显示带有图例的多个时间序列的图表。当用户将鼠标光标悬停在图例中的条目上时，我想显示一些文本。显然没有

Bokeh 独立嵌入内容服务文件夹（v 3.3.0 2023）

我正在尝试在远程位置运行服务器来渲染带有圆圈的绘图，以便工具提示包含悬停在其上的项目的图像。 我正在使用 Bokeh 3.3.0 和龙卷风。这是我的代码： 来自...

当工具提示太靠近窗口边缘时，rc-tooltip 会闪烁

我注意到 rc-tooltip 包的一个问题，当工具提示太靠近窗口边缘时，工具提示会闪烁，并且似乎无法决定将其放置在哪里......

如何将UTF-8 Arrow→表单typescript传递到html并显示？

在 html 中，我有一个带有绑定到函数的工具提示的 div。 像这样的东西： 在 html 中，我有一个带有绑定到函数的工具提示的 div。 像这样的东西： <div *ngFor="let user of users"> <div class="myClass" [matTooltip]="user.name + '&#013;' + getUserPhones(user.Id)" matTooltipClass="tooltip-large">{{ user.fullName }}</div> </div> 这段代码在这里：[matTooltip]="user.name + ' ' + getUserPhones(user.Id)" 它正在生成一个工具提示，看起来像： “用户名 --> 用户电话 1 --> 用户电话 2" 打字稿代码： public getUserPhones(userId: string): string { const currentUser = this.users.find((user) => user.userId === userId); const userPhonesArray = viewArr.phoneNumbers; const userPhonesDiplayText = ''; if (userPhonesArray .length <= 0) { return ''; } else { for (let i = 0; i < userPhonesArray.length; i++) { userPhonesDiplayText += '&rarr;' + userPhonesArray[i] + '&#013;' ; return userPhonesDiplayText ; } } } 我正在尝试做的事情：如果用户有超过 1 个电话号码，我想在新行中显示带有电话的箭头 问题是传递给 html 的代码不会更改为 arrow('→') 和 new line (' '）。 我收到类似以下内容： 用户名 → 电话1 → 电话2 如何将字符串从打字稿传递到html并获取箭头和空行？ 可以吗？ 要将 UTF-8 箭头字符（→，表示为 →）从 TypeScript 传递到 HTML 并显示它，您可以使用 JavaScript/TypeScript 来操作 HTML 内容。具体方法如下： HTML 文件： 在 HTML 文件中，创建一个要在其中显示箭头字符的元素（例如 、 或任何其他 HTML 元素）。给它一个id或class以便于选择。 <div id="arrow-display"></div> TypeScript/JavaScript 代码： 在 TypeScript 或 JavaScript 代码中，您可以通过其 id 或类访问 HTML 元素，然后将其 innerHTML 设置为 UTF-8 箭头字符实体 (→)。 // Get the HTML element by its id const arrowDisplay = document.getElementById("arrow-display"); // Check if the element exists if (arrowDisplay) { // Set the innerHTML of the element to the UTF-8 arrow character entity arrowDisplay.innerHTML = "&#8594;"; }

使用 v-tooltip (vuetify) 使工具提示在 v-text-field 中显示清晰的图标

我有兴趣为 v 文本字段中的清晰图标创建工具提示。您能否提供有关如何实现这一目标的指导？ 我有兴趣为 v 文本字段中的清晰图标创建工具提示。您能否提供如何实现这一目标的指导？ <v-text-field ref="newSearchField" v-model="text" class="search-input" :class="{ 'rounded-r-lg': $vuetify.breakpoint.smAndDown, 'rounded-l-lg': $vuetify.breakpoint.xsOnly }" type="text" solo :label="label" :disabled="disabled" :placeholder="label" persistent-placeholder autofocus data-test="search-input" hide-details clearable autocomplete="off" @keyup="nextItem" @click:clear=" clear() $nuxt.$data.layoutName === 'home' ? (text = '') : $emit('clear') " @input="autocomplete" @keydown="blured = false" @focus="blured = false" > 将透明图标的类（示例中为 .v-field__clearable 或 .search-input .v-field__clearable）传递给 v-tooltip 的 :activator 属性： <v-tooltip activator=".v-field__clearable">clear input</v-tooltip> 在代码片段中查看它是如何工作的： const { createApp, ref } = Vue; const { createVuetify } = Vuetify const vuetify = createVuetify() const app = { template: ` <v-app> <v-main> <v-text-field v-model="msg" class="search-input" clearable /> <v-tooltip activator=".search-input .v-field__clearable"> clear it </v-tooltip> </v-main> </v-app> `, setup(){ return { msg: ref('hello world') } } } createApp(app).use(vuetify).mount('#app') <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" /> <link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet"> <div id="app"></div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

格式化 R 绘图工具提示（例如 $ 3.5 B 或 6.7 M）

我为在 R 中制作的图表创建了一些工具提示。我的工具提示显示了年份和成本。有时，成本是一个很大的数字（例如数百万或数十亿）。我可以让 R 自动表达工具吗...

如何将自定义工具提示添加到 R Shiny 仪表板中的 ggplot 条形图？

我有一系列为 R Shiny 仪表板制作的条形图。当用户将鼠标悬停在条形上时，我希望年份（x 轴）和成本金额（y 轴）显示在条形上方。 我在集成时遇到问题...

iOS 版 swiftUI 中的自定义工具提示

我有一行颜色，我想为每种颜色显示一个工具提示。 结构 ColorsView: 视图 { 让颜色= [UIColor.red，UIColor.white，UIColor.gray，UIColor.blue，UIColor.black] ...

“IndependentValue”成员无效，因为它在 ChartinToolkit wpf 中没有限定类型名称

我正在尝试查看图表中 ace 的值，但出现以下错误 “‘IndependentValue’成员无效，因为它在 ChartinToolkit wpf 中没有限定类型名称” t...