css 向工具提示 Package 器添加箭头图标时出现问题

p1tboqfb 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(100)

我试图使用HTML和CSS向工具提示 Package 器添加一个箭头图标，但在使箭头图标正确显示时遇到了困难。我遵循了多种方法和建议，但箭头图标仍然不可见。我将非常感谢一些关于可能导致此问题的指导。
最后我试着像这张图一样微笑。
x1c 0d1x的数据
我尝试过的：
在.tooltip-wrapper类中添加了一个：：after伪元素，并具有适当的样式。

尝试了箭头图标的不同边框样式、颜色和尺寸。
已使用content确保伪元素具有内容和维度：'';，width：0;和高度：0;.

问题似乎是由于overflow-auto而发生的。我需要另一个 Package 器元素吗？

.parent {
  display: inline-flex;
  position: relative;
  font-weight: 900;
}

.tooltip-wrapper {
  display: none;
  position: absolute;
  overflow: auto;
  max-height: 20px;
  max-width: 200px;
  width: max-content;
  padding: 10px;
  bottom: 10px;
  background-color: blue;
}

.parent:hover .tooltip-wrapper {
  display: block;
}

.tooltip-content {
  font-weight: normal;
  color: white;
}

.tooltip-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: red transparent red transparent;
}

个字符
这里是sandbox link来玩

css

来源：https://stackoverflow.com/questions/76852576/trouble-adding-arrow-icon-to-tooltip-wrapper

2条答案

按热度按时间

hgc7kmma1#

抱歉，我不确定你到底在找什么。我想这正是你想要的。包括必要的评论。

/* creating some space on the top */
section{
    margin-top: 30px;
}

.parent {
    display: inline-flex;
    position: relative;
    font-weight: 900;
}

.tooltip-wrapper {
    display: none;
    position: absolute;
    overflow: auto;
    max-height: 20px;
    max-width: 200px;
    width: max-content;
    padding: 10px;
    bottom: 25px;
    background-color: blue;
    border-radius: 10px;
    margin-left: -70px;
}

.parent:hover .tooltip-wrapper {
    display: inline-block;
}

.tooltip-content {
    font-weight: normal;
    color: white;
}

.parent::after {
    content: "";
    position: absolute;
    bottom: 16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: blue transparent blue transparent;
    /* for vertical flip */
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1);

    /* left positioning */
    left: 35px;
    display: none;
}

/* bottom blue background */
.parent::before{
    content: "";
    position: absolute;
    width: 190px;
    height: 10px;
    background: blue;
    left: -60px;
    bottom: 25px;
    z-index: 1;
    display: none;
}

/* displaying pseudo elements on hover */
.parent:hover::before, .parent:hover::after{
    display: block;
}

个字符

赞(0）回复(0）举报 2023-08-08

vsdwdz232#

代码和实现都很好，但我建议您将.tooltip-wrapper::after中的border-color字段改为这样。

border-color: red transparent red transparent;

字符串
试试这个，让我知道它是否固定。

赞(0）回复(0）举报 2023-08-08

我来回答

css 向工具提示 Package 器添加箭头图标时出现问题

2条答案

相关问题

热门标签

最新问答