tooltip 相关问题

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

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

tooltip visual-studio-2022 font-size

回答 1 投票 0

我有以下使用 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>

javascript reactjs tooltip material-ui

回答 4 投票 0

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

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

html css sass tooltip

回答 1 投票 0

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

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

css google-apps-script google-sheets position tooltip

回答 1 投票 0

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

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

javascript reactjs material-ui tooltip

回答 1 投票 0

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

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

reactjs material-ui tooltip

回答 2 投票 0

在带有省略号的表格单元格中显示工具提示：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 组件本身，这个答案恐怕对您没有帮助。

reactjs tooltip antd ellipsis

回答 1 投票 0

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

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

javascript html tooltip bootstrap-5

回答 1 投票 0

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

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

javascript time-series tooltip legend rickshaw

回答 1 投票 0

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

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

python server tooltip bokeh tornado

回答 1 投票 0

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

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

reactjs tooltip

回答 1 投票 0

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

在 html 中，我有一个带有绑定到函数的工具提示的 div。像这样的东西：在 html 中，我有一个带有绑定到函数的工具提示的 div。像这样的东西： <div *ngFor="let user of users"> <div class="myClass" [matTooltip]="user.name + '' + 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 += '→' + userPhonesArray[i] + '' ; 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 = "→"; }

javascript html angular typescript tooltip

回答 1 投票 0

使用 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>

vue.js vuetify.js tooltip v-tooltip

回答 1 投票 0

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

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

r shiny tooltip

回答 1 投票 0

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

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

r ggplot2 shiny tooltip

回答 1 投票 0

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

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