tooltip 相关问题

我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。我有以下 element-ui 组件：黑暗我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。我有以下 element-ui 组件： <el-tooltip content="Top center" placement="top"> <span>Dark</span> </el-tooltip> 默认情况下，我会得到一个黑色背景的工具提示。从文档我看到有effect属性，其可接受的值为dark/light。请问有没有办法改变el-tooltip的背景颜色？编辑：尝试过： <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 并得到：也尝试过（按照示例）： <el-tooltip content="Top center" placement="top" effect="light" effect="customized"> <span>Dark</span> </el-tooltip> <style> .el-popper.is-customized { /* Set padding to ensure the height is 32px */ padding: 6px 12px; background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); } .el-popper.is-customized .el-popper__arrow::before { background: linear-gradient(45deg, #b2e68d, #bce689); right: 0; } </style> 并得到：您可能需要覆盖原始 CSS，例如： <template> <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> </template> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 只要您知道要选择正确的元素，就始终可以使用 CSS 来实现自定义样式。我使用 Vue 2 和 Element UI v2 创建了一个 codepen 并检查了 DOM 以确定需要应用哪些 CSS。这是我想到的： <el-tooltip content="Top center" placement="top" effect="customized"> <el-button>Custom Tooltip</el-button> </el-tooltip> /* tooltip body */ .el-tooltip__popper.is-customized { background: #50C878; } /* tooltip arrow body */ .el-tooltip__popper.is-customized .popper__arrow { border-top-color: #50C878; } /* tooltip arrow border */ .el-tooltip__popper.is-customized .popper__arrow::after { border-top-color: #50C878; } 上面的代码仅适用于带有 placement="top" 的工具提示。对于其他展示位置，您需要更改 border-{placement}-color 进行匹配。例如： placement="bottom"需要改变border-bottom-color placement="left"需要改变border-left-color 如果您需要自定义多个不同位置的工具提示，则需要为每个工具提示指定一个唯一的 effect 名称，这会更改 .el-tooltip__popper.is-{effectName} 的 CSS 选择器，这样 CSS 就不会发生冲突。

css vue.js vuejs2 tooltip element-ui

回答 2 投票 0

更改el-tooltip的背景颜色？

我有以下 element-ui 组件：黑暗默认情况下我得到...

html css vue.js tooltip element-ui

回答 1 投票 0

更新到 macOS Sonoma 后，工具提示未显示在自定义 NSTextField 中

我已将工具提示正确设置为我的自定义 NSTextField，该字段已添加到我的自定义视图中，但现在不起作用。惰性变量 errorField: NSTextField = { 让 labelView = NSTextField() 标签视图。

xcode macos tooltip appkit macos-sonoma

回答 1 投票 0

带有工具提示实现的 MAUI 滑块

我正在尝试实现一个带有显示当前值的工具提示的滑块。这个想法是制作类似 HTML + JS 的带有值气泡的东西（https://css-tricks.com/value-bubbles-for-range-inputs/）。 ...

c# slider tooltip maui

回答 1 投票 0

在弹出菜单的禁用菜单项上显示工具提示提示

所以我有一个 TMenuItem 附加到 TDBGrid 的 TPopupMenu 上的 TAction（实际上是第 3 方，但你明白了）。根据网格中选定的行，启用或禁用 TAction。什...

delphi user-interface delphi-2007 tooltip

回答 3 投票 0

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

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

html button tooltip

回答 3 投票 0

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

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

tooltip svelte

回答 2 投票 0

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

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

javascript css tooltip mudblazor

回答 1 投票 0

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

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

c# visual-studio intellisense tooltip

回答 4 投票 0

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

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

css reactjs tooltip antd styled-components

回答 4 投票 0

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

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

tkinter tooltip

回答 1 投票 0

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

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

html tooltip

回答 1 投票 0

CSS：侧边栏工具提示斗争

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

html css tooltip css-position sidebar

回答 1 投票 0

tooltip 相关问题

最新问题