当前位置:主页 > JavsScript库 > 通知 / 提示 >

Tooltipper 是一个超小型的工具提示 javascript 库 - tooltipper
栏目分类:通知 / 提示   发布日期:2021-08-18   浏览次数:

Tooltipper 是一个超小型的工具提示 JavaScript 库,它会自动调整工具提示的位置以保持在屏幕上。例如,如果工具提示溢出屏幕右侧,它会自动将工具提示重新定位到左侧。

如何使用它:

1. 将 Tooltipper JavaScript 库导入到文档中。

<script defer src=”tooltipper.min.js”></script>

2.在tooltip属性中定义tooltip内容:

<a href="#" tooltip="Tooltip 提示内容">
  ...
</a>

3. 或者在aria-label属性中:

<a href="#" aria-label="Tooltip 提示内容" tooltip>
  ...
</a>

4. 将您自己的 CSS 样式应用于工具提示。

tool-tip {
  background-color: #424242;
  color: #fff;
  border-radius: 0.125rem;
  line-height: 24px;
  height: 24px;
  white-space: nowrap;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transform-origin: center;
}
  
tool-tip.visible {
  animation: limitedTooltip 1725ms 150ms linear forwards;
}
  
@keyframes limitedTooltip {
  0% {
    opacity: 1;
  }
  4% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
}

官方网站:https://github.com/codewithkyle/tooltipper

相关热词: tooltipper工具提示

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库