如何在工具提示中添加自定义动画

编程问答 2022-06-03

问题描述

我已经使用Ngx Tippy wrapper创建了一个工具提示，它是Tippy.js的一个斜角版本。我已经为工具提示创建了一个自定义动画，但是它没有按预期工作。

问题-第一次显示工具提示时，自定义动画不起作用。从第二次开始，动画就开始播放。

还有什么方法可以在滚动事件中隐藏工具提示？

我使用了下面的代码。有人知道为什么会这样吗？

Component.HTML-

<div class="sidebar">
  <ul>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="Home"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-home"></span>
      </a>
    </li>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="About us"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-about-us"></span>
      </a>
    </li>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="Blogs"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-blog"></span>
      </a>
    </li>
  </ul>
</div>

Component.ts-

import { NgxTippyProps } from "ngx-tippy-wrapper";

public tippyProps = {
  arrow: false,placement: "right",animation: "custom-tooltip-animation",hideOnClick: true,inertia: true,offset: [0,5]
}

Component.css-

.custom-tooltip{
    border-radius: 20px !important;
    background: #3E3F5E !important;
    line-height: 0 !important;
    overflow: hidden;
}
.custom-tooltip .tippy-content{
    padding: 0 12px !important;
    line-height: 25px !important;
    height: 25px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: capitalize;
    font-family: 'Rajdhani',sans-serif;
}
.custom-tooltip[data-out-of-boundaries] {
    opacity: 0;
    transform: translate(10px,0px);
    visibility: hidden;
}
/* Right */
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='hidden']{
    opacity: 0;
    transform: translate(10px,0px);
    visibility: hidden;
}
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='visible'] {
    opacity: 1;
    transform: translate(0px,0px);
    visibility: visible;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularjavascripttippyjs