tooltip 相关问题

我正在做 freecodecamp choropleth 地图项目：https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map 这是带有

javascript d3.js tooltip geojson

回答 1 投票 0

在使用 Angular 和 json 实现的时间线配置的工具提示中写入多行字符串

我正在开发 OpsWeb，这是 ESA 用于任务规划和操作的工具。我想创建一个时间轴来显示任务的统计数据。根据文件...

html angularjs tooltip

回答 1 投票 0

工具提示在引导程序中不改变颜色 4

我正在尝试为我的工具提示添加背景颜色，但它并没有改变它的黑色颜色。类似问题提供的尝试方法，但没有任何效果。我正在使用 Bootstrap 4 和 Vue 3。

css bootstrap-4 vuejs3 tooltip jquery-ui-tooltip

回答 0 投票 0

向 GtkButton 添加工具提示

我想给 GtkButton 添加一个工具提示。这似乎是一件容易的事，除了我不知道为什么不起作用。我拥有的： 1) GtkButton* 按钮 = gtk_button_new_with_label("按钮");

button gtk tooltip

回答 3 投票 0

如何使数据属性读取 HTML

我有一个仅显示文本的数据属性工具提示。现在我想在一个短语中添加Lorem。例如 tooltip="你好，这是我有一个仅显示文本的数据属性工具提示。现在我想在一个短语中添加<a href="google.com">Lorem</a>。比如说tooltip="Hello, this is <a href="google.com">Lorem</a> welcome" 但我无法实现 HTML，因为它会将其读取为文本。如何让工具提示/数据属性读取 HTML。我想到了类似的东西：阅读工具提示中的确切特定文本并将其替换为<a href="google.com">Lorem</a> - 但是 - 仍然会将其显示为文本。 /* START TOOLTIP STYLES */ [tooltip] { position: relative; /* opinion 1 */ } /* Applies to all tooltips */ [tooltip]::before, [tooltip]::after { text-transform: none; /* opinion 2 */ font-size: .9em; /* opinion 3 */ line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; } [tooltip]::before { content: ''; border: 5px solid transparent; /* opinion 4 */ z-index: 1001; /* absurdity 1 */ } [tooltip]::after { content: attr(tooltip); /* magic! */ /* most of the rest of this is opinion */ font-family: Helvetica, sans-serif; text-align: center; /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; z-index: 1000; /* absurdity 2 */ } /* Make the tooltips respond to hover */ [tooltip]:hover::before, [tooltip]:hover::after { display: block; } /* don't show empty tooltips */ [tooltip='']::before, [tooltip='']::after { display: none !important; } /* FLOW: UP */ [tooltip]:not([flow])::before, [tooltip][flow^="up"]::before { bottom: 100%; border-bottom-width: 0; border-top-color: #333; } [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after { bottom: calc(100% + 5px); } [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after { left: 50%; transform: translate(-50%, -.5em); } /* FLOW: DOWN */ [tooltip][flow^="down"]::before { top: 100%; border-top-width: 0; border-bottom-color: #333; } [tooltip][flow^="down"]::after { top: calc(100% + 5px); } [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after { left: 50%; transform: translate(-50%, .5em); } /* FLOW: LEFT */ [tooltip][flow^="left"]::before { top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%); } [tooltip][flow^="left"]::after { top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%); } /* FLOW: RIGHT */ [tooltip][flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%); } [tooltip][flow^="right"]::after { top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%); } /* KEYFRAMES */ @keyframes tooltips-vert { to { opacity: .9; transform: translate(-50%, 0); } } @keyframes tooltips-horz { to { opacity: .9; transform: translate(0, -50%); } } /* FX All The Things */ [tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after { animation: tooltips-vert 300ms ease-out forwards; } [tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after { animation: tooltips-horz 300ms ease-out forwards; } /* UNRELATED to tooltips */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: sans-serif; background: #ededed; } main { flex: 1 1 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } aside { flex: none; display: flex; align-items: center; justify-content: center; background: #49b293; color: #fff; padding: 1em; } main div { text-align: center; color: #353539; } main span { padding: .5em 1em; margin: .5em; display: inline-block; background: #dedede; } aside a { color: inherit; text-decoration: none; font-weight: bold; display: inline-block; padding: .4em 1em; } <main> <div> <span tooltip="I'm up above it!">Up</span> </div> <div> <span tooltip="Slide to the left" flow="left">Left</span> <span tooltip="Slide to the right" flow="right">Right</span> </div> <div> <span tooltip="Get Down." flow="down">Down</span> </div> </main> 您不能将 HTML 插入到工具提示中。实现这一点的最佳方法是创建您自己的 div，它只会在悬停时显示并充当工具提示。让你开始： HTML <main> <div id="up"> <div><a href="#">Some Link</a></div> <span>Up</span> </div> <div> <span tooltip="Slide to the left" flow="left">Left</span> <span tooltip="Slide to the right" flow="right">Right</span> </div> <div> <span tooltip="Get Down." flow="down">Down</span> </div> </main> CSS #up { position: relative; } #up div { display: none; position: absolute; top: -20px; padding-bottom: 20px; white-space: nowrap; } #up:hover div { display: block; } 您需要参考css position。请记住，父元素也必须是一个定位元素 -> 这就是为什么我在 #up 元素上有一个相对位置。按照这种模式并调整每个链接的位置，您应该能够将其他链接/工具提示放置到位。

javascript html attributes tooltip

回答 1 投票 0

如何在 angular 中初始化和添加 bootstrap v5.3 工具提示

我想向表格单元格添加工具提示引导工具提示也不适用于普通按钮我在 index.html 中添加了这个链接 const tooltipTriggerList = document.querySelector...

tooltip angular-bootstrap

回答 0 投票 0

为什么我的 CSS 在我的 R Shiny 应用程序中被忽略了？

考虑我在此代表的信息图标上安装的工具提示：图书馆（闪亮）用户界面<- fluidPage( span( `data-toggle` = "tooltip", `data-placement` = "auto", ...

jquery css r shiny tooltip

回答 0 投票 0

图像作为链接图 - 悬停以显示文本（工具提示），单击以更改/更新 div 内容 - 完全迷失在这里

首先，我是 HTML / CSS 的初学者，但通常可以处理一些事情，但困难的部分是在涉及 JS 或 jQuery 时开始。我正在为我自己的网站做一些事情。这个想法很简单......