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

时间：2019-02-05 10:09:45

标签： css sass

大家好，我正在尝试创建一个自定义工具提示，并具有很酷的悬停效果。我在互联网上找到了几乎可以完成我想要的代码。下面是代码

.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);
      }
    }
  }
}

这是结果 Tool tip result

我想要的是，自定义工具提示应该显示在组件上方 不低于。我是CSS / SCSS的新手，所以一个好心的人可以为我编辑代码以获得这种效果吗？

更新
This link是我从中获取代码的地方。它有一个可行的例子。

3 个答案:

答案 0 :(得分：2)

.tooltip {
  position: relative;
}
.tooltip__item {
  position: absolute;
  min-width: 100px;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  background: white;
  transition: all 0.25s 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;
}
.tooltip__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.tooltip__initiator {
  cursor: pointer;
  z-index: 5;
}
.tooltip[data-direction="left"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(0, -50%, 0);
  visibility: visible;
  opacity: 1;
}
.tooltip[data-direction="left"] .tooltip__item {
  top: 50%;
  right: calc(100% + 1em);
  transform: translate3d(15px, -50%, 0);
}
.tooltip[data-direction="left"] .tooltip__item:after {
  top: 50%;
  right: -0.5em;
  transform: translate3d(0, -50%, 0);
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent white;
  -webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
  filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="top"] .tooltip__initiator:hover ~ .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.tooltip[data-direction="top"] .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__item {
  left: 50%;
  transform: translate3d(-50%, -15px, 0);
}
.tooltip[data-direction="top"] .tooltip__item:after, .tooltip[data-direction="bottom"] .tooltip__item:after {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.tooltip[data-direction="top"] .tooltip__item {
  bottom: calc(100% + 1em);
}
.tooltip[data-direction="top"] .tooltip__item:after {
  bottom: -0.5em;
  border-width: 0.5em 0.5em 0 0.5em;
  border-color: white transparent transparent transparent;
  filter: drop-shadow(0px 2px 1px #bcbcbc);
  -webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="bottom"] .tooltip__item {
  top: calc(100% + 1em);
}
.tooltip[data-direction="bottom"] .tooltip__item:after {
  top: -0.5em;
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent white transparent;
  filter: drop-shadow(0px -1px 1px #bcbcbc);
  -webkit-filter: drop-shadow(0px -1px 1px #bcbcbc);
}

.fa.fa-info-circle {
  font-size: 38px;
  color: #21606b;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: #dadada;
  font-family: 'Roboto', sans-serif;
}

main {
  flex: 1 1 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<main>
  
  <!-- tooltip block -->
  <div class="tooltip" data-direction="top">
    <div class="tooltip__initiator">
      <!-- element with tooltip hover call -->
      <i class="fa fa-info-circle"></i>
    </div>
    <div class="tooltip__item">
      Hello! I'm a pure css tooltip going up
    </div>
  </div>
  
  <!-- tooltip block -->
  <div class="tooltip" data-direction="bottom">
    <div class="tooltip__initiator">
      <!-- element with tooltip hover call -->
      <i class="fa fa-info-circle"></i>
    </div>
    <div class="tooltip__item">
      Hello! I'm a pure css tooltip going down
    </div>
  </div>
  
  
</main>

答案 1 :(得分：1)

完成。

复制并粘贴此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);
      }
    }
  }

答案 2 :(得分：1)

我要添加“ top”数据目录。您需要通过更改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);
      }
    }
  }

还有example is here

相关问题
最新问题