tooltip 相关问题

如何在不使用任何图像的情况下像上面一样设计底部的提示。下面是我的跟踪代码：提示：上传您的... 如何在不使用任何图像的情况下像上面一样设计底部的提示。以下是我的跟踪代码： <div id="coverImageToolTip"><p><font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE <div id="tail1"></div> <div id="tail2"></div> #coverImageToolTip { position: absolute; z-index: 10; padding: 0px 4px; background-color: gray; bottom: 100px; left: 20%; border-radius: 10px; font-weight: bold; border-bottom: 5px solid black; } /* #tail1 { position:absolute; bottom:100px; left:20px; width:0;height:0; border-color:#a0c7ff transparent transparent transparent; border-width:10px; border-style:solid; } */ #tail2 { position:absolute; bottom:-18px; left:20px; width:0;height:0; border-color: red transparent transparent red ; border-width:10px; border-style:solid; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } 最小标记版本： 2024年答案我们可以在下面的透明边框区域中创建带有 conic-gradient() 的工具提示尾部。然后我们使用 filter: drop-shadow() 创建跟随整个形状的阴影。我们将这些样式设置在工具提示后面的绝对定位伪上，因为我们不希望阴影也应用在关闭按钮上。 /* just to close tooltip from button */ addEventListener('click', e => { let _t = e.target; if(_t.getAttribute('aria-label') === 'close') { _t.parentNode.classList.add('closed') } }); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); html, body, button { display: grid } html { height: 100% } body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) } .tooltip { --r: 5px; /* tooltip corner rounding */ --h: 1.25em; /* arrow height */ --c: #999; /* tooltip background */ place-self: center; position: relative; margin-bottom: var(--h); /* reserve arrow space */ padding: .25em; width: 8em; font: 700 2em/ 1.375 oswald, sans-serif; text-align: center; text-transform: uppercase; &::before { position: absolute; z-index: -1; inset: calc(-1*var(--h)); /* increase background area with transparent border */ border: solid var(--h) #0000; border-radius: calc(var(--h) + var(--r)); background: /* main box, restricted to padding-box */ linear-gradient(var(--c) 0 0) padding-box, /* tooltip tail, within all border-box */ conic-gradient( from 20deg /* tail start angle */ at 43% /* horizontal tail tip position */ 100%, var(--c) 30deg /* angular size of tail */, #0000 0%) 0 100% /* place at the bottom *// 50% 50% no-repeat /* limit size & repetition so no overflow */ border-box; filter: drop-shadow(0 6px #434343); content: '' } } .closed { display: none } .highlight { color: #fff } /* prettify close button from here on */ button { position: absolute; top: 0; right: 0; padding: 0; width: 1.125em; aspect-ratio: 1; border: solid 4px currentcolor; border-radius: 50%; translate: 50% -50%; background: #030303; color: var(--c); font: inherit; &::before, &::after { grid-area: 1/ 1; place-self: center; width: .625em; height: 4px; border-radius: 3px; rotate: -45deg; background: currentcolor; content: '' } &::after { rotate: 45deg } } <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'></button> <div> 如果尾部锯齿状令人不安，我们可以在 filter 之前使用自定义 SVG drop-shadow() 来平滑它。 addEventListener('click', e => { let _t = e.target; if(_t.getAttribute('aria-label') === 'close') { _t.parentNode.classList.add('closed') } }); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); html, body, button { display: grid } html { height: 100% } body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) } svg[height='0'] { position: fixed; } .tooltip { --r: 5px; /* tooltip corner rounding */ --h: 1.25em; /* arrow height */ --c: #999; /* tooltip background */ place-self: center; position: relative; margin-bottom: var(--h); /* reserve arrow space */ padding: .25em; width: 8em; font: 700 2em/ 1.375 oswald, sans-serif; text-align: center; text-transform: uppercase; &::before { position: absolute; z-index: -1; inset: calc(-1*var(--h)); /* increase background area with transparent border */ border: solid var(--h) #0000; border-radius: calc(var(--h) + var(--r)); background: /* main box, restricted to padding-box */ linear-gradient(var(--c) 0 0) padding-box, /* tooltip tail, within all border-box */ conic-gradient( from 20deg /* tail start angle */ at 50% /* horizontal tail tip position */ 100%, var(--c) 35deg /* angular size of tail */, #0000 0%) 0 100% /* place at the bottom *// 100% 50% no-repeat /* limit size & repetition so no overflow */ border-box; filter: blur(2px) url(#smooth) drop-shadow(0 6px #434343); content: '' } } .closed { display: none } .highlight { color: #fff } /* prettify close button from here on */ button { position: absolute; top: 0; right: 0; padding: 0; width: 1.125em; aspect-ratio: 1; border: solid 4px currentcolor; border-radius: 50%; translate: 50% -50%; background: #030303; color: var(--c); font: inherit; &::before, &::after { grid-area: 1/ 1; place-self: center; width: .625em; height: 4px; border-radius: 3px; rotate: -45deg; background: currentcolor; content: '' } &::after { rotate: 45deg } } <svg width='0' height='0'> <filter id='smooth' color-interpolation-filters='sRGB'> <feComponentTransfer> <feFuncA type='gamma' amplitude='4' exponent='3' offset='-.5'> </feComponentTransfer> </filter> </svg> <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'></button> <div> 原始答案，出于网络历史记录原因而保留： body { background: lightblue; } .tooltip { position: relative; margin: 1em auto; padding: .5em .2em; width: 10.5em; height: 3em; border-radius: .25em; box-shadow: 0 .2em 0 black; background: #999; font: 700 1.6em/1.5 sans-serif; text-align: center; text-transform: uppercase; } button { position: absolute; top: -.75em; right: -.75em; border: solid .2em; width: 1.5em; height: 1.5em; border-radius: 50%; background: black; color: #999; font: 900 .65em/1 sans-serif; text-align: center; } .tooltip:after { position: absolute; z-index: -1; right: 25%; bottom: -.75em; width: 2em; height: 2em; box-shadow: 0 .35em 0 black; transform: rotate(30deg) skewY(-60deg); background: inherit; content: ''; } .highlight { color: white; } .highlight:after, .highlight:before { position: absolute; top: 100%; right: 31.025%; width: 1.725em; height: .2em; transform: skewX(-30deg); background: #999; content: ''; } .highlight:after { right: 30.65%; transform: skewX(-60deg); } <div class='tooltip'> <span class='highlight'>tip:</span> upload your cover image here <button aria-label='close'>x</button> <div> 请参阅纯CSS关闭按钮（CSS中的关闭按钮）和http://v2.desandro.com/resources/css-speech-bubble-icon/了解实际踪迹。您可以在CSS中执行关闭按钮和箭头，但箭头的阴影是不可能的。看下面的代码 HTML <div id="coverImageToolTip"> <div class="close"><a href="#">X</a></div> <p> <font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE </p> <div id="tail1"></div> <div id="tail2"></div> </div> CSS .close a{ position:absolute; right:-5px; top:-8px; display:inline-block; background:black; padding:2px 6px; color:white; border:solid grey 3px; border-radius:22px; font-size:12px; text-decoration:none } #tail2 { position:absolute; bottom:-19px; left:80px; width:0;height:0; border-color: grey transparent transparent grey ; border-width:10px; border-style:solid; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(1deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } 演示您可以使用 before 和 after 模拟接近图像的箭头形状。看看这个演示：http://jsfiddle.net/j34um/3/

html css tooltip

回答 4 投票 0

Bootstrap 5 - 按钮上的下拉菜单和工具提示？

尝试向已使用 data-bs-toggle 的 btn （或任何其他标签）添加工具提示 - 我能得到的最佳结果如下：函数 xmdEnableTooltips() { 让 tooltipTriggerList = [].sl...

javascript html twitter-bootstrap tooltip

回答 2 投票 0

创建 HTML 鼠标悬停工具提示的最简单方法是什么？

在不使用 JavaScript 的情况下创建 HTML 鼠标悬停工具提示的最简单、最简洁的方法是什么？将鼠标悬停在...

html tooltip

回答 3 投票 0

如何让 VS Code 向我显示光标当前位置所需的 TypeScript 类型，而无需移动光标

假设我在代码库的其他地方有这个类型定义，即我没有打开这个 typedef 文件，所以它当前不可见：类型配置= { a：字符串； b：数量； c：“猫”...

typescript visual-studio-code types tooltip

回答 1 投票 0

如何禁用输入类型=日期字段的工具提示消息？

当我在使用输入类型=“日期”时将光标悬停在日历图标上时，我想隐藏显示“显示日期pikcer”的默认工具提示消息这是我的代码，生日：我

html date input tooltip

回答 1 投票 0

禁用 Antd Datepicker 工具提示

我在我的网站中使用 Antd Datepicker。我们从外部 api 获取表示禁用日期的数字数组，并仅显示日期选择器中的日期（无月、年等）。日期选择...

css reactjs datepicker tooltip antd

回答 3 投票 0

向禁用的引导按钮添加工具提示

我尝试过在其他类似线程上找到的解决方案，但无法让它们工作。我有一个引导按钮，当处于禁用状态时，应该有一个工具提示，让用户知道为什么它被禁用...

javascript jquery css tooltip jquery-ui-tooltip

回答 2 投票 0

向禁用的引导按钮添加工具提示

我尝试过在其他类似线程上找到的解决方案，但无法让它们工作。我有一个引导按钮，当处于禁用状态时，应该有一个工具提示，让用户知道为什么它不...

javascript jquery css tooltip jquery-ui-tooltip

回答 1 投票 0

AMcharts 5 将数据添加到工具提示

我有像这样的xAxis和xRenderer：让 xRenderer = amChartXY.AxisRendererX.new(root, {minGridDistance: 30}); xRenderer.labels.template.setAll({ 旋转：-45， ...

javascript tooltip amcharts amcharts5

回答 1 投票 0

标记链接标题中可以有空行吗？

此标记会生成以下 HTML： [工具提示](http://stackoverflow.com“这是工具提示文本。”) 此标记导致此 HTML： [tooltip](http://stackoverflow.com "This is the tooltip text.") <a href="http://stackoverflow.com" title="This is the tooltip text.">tooltip</a> 看起来像这样（悬停时显示标题），这一切都很好：工具提示我想要的是这样的，其中链接标题中有空行： <a href="http://stackoverflow.com" title="This is.. indeed... ... a tooltip text.">tooltip</a> 使用 HTML 可以做到这一点，只需获得一个在悬停时显示空行的标题即可。但是你似乎无法使用 markdown 来做到这一点： [tooltip](http://stackoverflow.com "This is.. indeed... ... a tooltip text.") 最终产生： [工具提示](http://stackoverflow.com“这是.. 确实... ...工具提示文本。”）所以我的问题是：有没有办法使用 Markdown 在链接标题中添加空行？ I've tried "<br/>" and "\" but they do not work in link titles sadly （纯降价的替代建议也很好，谢谢）不，使用 Markdown 时链接标题中不能有空行。 No

html hyperlink markdown tooltip

回答 1 投票 0

tooltip 相关问题

最新问题