CSS/SCSS自定义工具提示效果

大家好，我正在尝试创建一个自定义的工具提示，带有一个很酷的悬停效果。我在网上找到了一个代码，它几乎满足了我的需求。下面是代码

.tooltip {
  position: relative;

  &__item {
    position: absolute;
    min-width: 100px;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    background: white;
    transition: all .250s cubic-bezier(0, 0, 0.2, 1);
    color: #484848;
    border: 1px solid #cecece;
    border-radius: 3px;
    font-weight: 500;
    box-shadow: 0 2px 1px #bcbcbc;
    z-index: 4;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }
  }

  &__initiator {
    cursor: pointer;
    z-index: 5;
  }

  &[data-direction="bottom"] {

    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      top: calc(100% + 1em);
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        top: -0.5em;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        border-width: 0 0.5em 0.5em 0.5em;
        border-color: transparent transparent white transparent;
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(1px -1px 1px #bcbcbc);
      }
    }
  }
}

结果如下

我想要的是自定义工具提示应该显示在组件上方而不是下方。我是css/scss新手，那么一个善良的人能为我编辑代码以获得这种效果吗

更新
是我从哪里得到密码的。它有一个工作示例。

完成

复制并粘贴此CSS

   &[data-direction="bottom"] {

    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      bottom: 50px;
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        top: 100%;
        left: 45%;
        transform: translate3d(-40%, 0, 0);
        border-width: 0 0.5em 0.5em 0.5em;
        border-color: transparent transparent white transparent;
        transform:rotate(180deg);
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(1px -1px 1px #bcbcbc);
      }
    }
  }

我会添加“顶部”数据方向。您需要通过更改

top

值来更改工具提示的位置。您还需要通过更改

：after

 top -> bottom

还有边框的颜色

border-color: white transparent white transparent;

和影子：

filter: drop-shadow(-1px 1px 1px #bcbcbc);

以下是完整的代码：

&[data-direction="top"] {
    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      top: calc(-200% - 2em);
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        bottom: -0.5em;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        border-width: 0.5em 0.5em 0 0.5em;
        border-color: white transparent white transparent;
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(-1px 1px 1px #bcbcbc);
      }
    }
  }

和

。工具提示{
位置：相对位置；
}
.工具提示\uuu项{
位置：绝对位置；
最小宽度：100px；
填充：20px；
可见性：隐藏；
不透明度：0；
背景：白色；
过渡：所有0.25s三次贝塞尔（0,0,0.2,1）；
颜色：#4848；
边框：1px实心#cecece；
边界半径：3px；
字号：500；
盒影：0 2px 1px#bcbc；
z指数：4；
}
.工具提示\u项：在{
内容：“；
显示：块；
位置：绝对位置；
宽度：0；
身高：0；
边框样式：实心；
}
.工具提示\uuuu启动器{
光标：指针；
z指数：5；
}
.tooltip[data direction=“left”].tooltip\uuu启动器：悬停~.tooltip\uuu项{
转换：translate3d（0，-50%，0）；
能见度：可见；
不透明度：1；
}
.tooltip[数据方向=“左”]。tooltip\u项{
最高：50%；
右图：计算值（100%+1m）；
转换：translate3d（15px，-50%，0）；
}
.tooltip[数据方向=“左”]。tooltip\u项：在{
最高：50%；
右：-0.5em；
转换：translate3d（0，-50%，0）；
边框宽度：0.5em 0.5em 0.5em；
边框颜色：透明白色；
-webkit过滤器：投影（0px 2px 1px#bcbc）；
过滤器：投影（0px 2px 1px#bcbc）；
}
.tooltip[data direction=“top”].tooltip\uuu启动器：悬停~.tooltip\uu项、.tooltip[data direction=“bottom”].tooltip\uu启动器：悬停~.tooltip\uu项{
转换：translate3d（-50%，0，0）；
能见度：可见；
不透明度：1；
}
.tooltip[data direction=“top”].tooltip\u项、.tooltip[data direction=“bottom”].tooltip\u项{
左：50%；
转换：translate3d（-50%，-15px，0）；
}
.tooltip[data direction=“top”]。tooltip\uu项：之后，.tooltip[data direction=“bottom”]。tooltip\uu项：之后{
左：50%；
转换：translate3d（-50%，0，0）；
}
.tooltip[数据方向=“顶部”]。tooltip\u项{
底部：钙（100%+1米）；
}
.tooltip[数据方向=“顶部”]。tooltip\u项：之后{
底部：-0.5em；
边框宽度：0.5em 0.5em 0.5em；
边框颜色：白色透明；
过滤器：投影（0px 2px 1px#bcbc）；
-webkit过滤器：投影（0px 2px 1px#bcbc）；
}
.tooltip[数据方向=“底部”]。tooltip\u项{
顶部：计算值（100%+1m）；
}
.tooltip[数据方向=“底部”]。tooltip\u项：在{
顶部：-0.5em；
边框宽度：0.5em 0.5em 0.5em；
边框颜色：透明白色透明；
过滤器：投影（0px-1px 1px#bcbc）；
-webkit过滤器：投影（0px-1px 1px#bcbc）；
}
.fa.fa-info-circle{
字号：38px；
颜色：#21606b；
}
身体{
保证金：0；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
字体系列：无衬线；
背景：#达达达；
字体系列：“Roboto”，无衬线；
}
主要{
弹性：1100VH；
最小高度：100vh；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：周围的空间；
}

你好我是一个纯粹的css工具提示
你好我是一个纯粹的css工具提示

请提供一个工作示例，以便我们可以使用它。似乎您需要更改

top:calc（100%+1em）为负数value@ItayGal我提供了一个链接到一个工作示例。我希望我能向上投票4次。谢谢你的回答，伙计！它的工作原理就像一个真正的魅力：）这不是CSS，而是SCS，而且它会将底部大小写重写为顶部大小写。最好在现有的底壳中添加顶壳