悬浮提示

通过调用元素实例上的 tip 实例的方法,可以更新提示框的内容、样式、高度等。

自定义悬浮提示

下面的示例展示了如何使用原生元素作为悬浮提示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com blob:;
               worker-src blob: 'self';
               style-src 'self' 'unsafe-inline';
               img-src 'self' data: blob:;
               font-src 'self' blob:;
               connect-src 'self' https://icraft.gantcloud.com blob:;
               object-src 'none';
               base-uri 'self';
               form-action 'self'"
    />
    <title>ICraft Player Tip Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        height: 100vh;
        position: relative;
      }
    </style>
    <script src="https://unpkg.com/@icraft/player@latest/dist/umd/icraft-player.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    const player = new ICraftPlayer({
      src: "https://icraft.gantcloud.com/api/static/templates/AWSCloud.iplayer",
      container: document.getElementById("container"),
      onReady: (player) => {
        const user = player?.getElementsByName("User")?.[0];
 
        const card = document.createElement("div");
        card.innerHTML = getUserCard("John Doe", "Operations Engineer");
        const cardStyle = getUserCardStyle();
        card.appendChild(cardStyle);
 
        user?.tip?.updateInnerHTML(card);
        user?.tip?.updateVisible(true);
      },
    });
 
    const getUserCard = (name, title) => {
      return `
        <div class="mini-profile">
          <div class="avatar">
            <img src="/images/avatar.jpg" alt="avatar"/>
            <span class="status"></span>
          </div>
          <div class="info">
            <h3>${name}</h3>
            <p>${title}</p>
          </div>
        </div>`;
      };
 
    const getUserCardStyle = () => {
      const style = document.createElement("style");
      style.textContent = `
        .mini-profile {
          width: 240px;
          padding: 12px;
          position: relative;
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .mini-profile::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          border-radius: inherit;
          border: 1px solid rgba(255, 255, 255, 0.3);
          box-shadow: 0 2px 12px rgba(0,0,0,0.08);
          z-index: -1;
        }
        .avatar {
          position: relative;
          flex-shrink: 0;
          z-index: 1;
        }
 
        .avatar img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          object-fit: cover;
        }
 
        .status {
          position: absolute;
          bottom: 2px;
          right: 2px;
          width: 10px;
          height: 10px;
          background: #22c55e;
          border: 2px solid #fff;
          border-radius: 50%;
        }
 
        .info {
          position: relative;
          flex: 1;
          min-width: 0;
          z-index: 1;
        }
 
        .info h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #1a1a1a;
          line-height: 1.4;
        }
 
        .info p {
          margin: 2px 0 0;
          font-size: 13px;
          color: #666;
          line-height: 1.3;
        }
      `;
      return style;
    };
  </script>
</html>

API

Tip 实例方法

Name	description	type
updateInnerHTML	更新提示框内容	(innerHTML: HTMLElement) => void
updateVisible	更新提示框可见性	(visible: boolean) => void
updateHeight	更新提示框高度	(height: number) => void
reset	重置提示框(还原为只显示名称的默认样式)	() => void

提示框的实例通过元素实例上的 tip 属性获取

动画字体

悬浮提示

自定义悬浮提示

API

Tip 实例方法

Home

Others