Tip

By calling methods on the tip instance of an element instance, you can update the tooltip's content, style, height, and more.

Custom Tooltips

There are two ways to use tooltips: using native elements or using React elements. Both essentially update DOM nodes.

Native Elements

The example below shows how to use native elements as tooltips

import { ICraftPlayer, ICraftPlayerInstance } from "@icraft/player-react";
import { useRef } from "react";
 
export default () => {
  const playerRef = useRef<ICraftPlayerInstance>(null);
 
  const onReady = () => {
    const player = playerRef.current;
    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);
  };
 
  return (
    <div style={style}>
      <ICraftPlayer
        src='/templates/AWSCloud.iplayer'
        onReady={onReady}
        ref={playerRef}
      />
    </div>
  );
};
 
const style = {
  width: "100%",
  height: "100%",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
const getUserCard = (name: string, title: string)=>{
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
}

React Elements

The example below shows how to use React elements as tooltips

index.tsx

import { ICraftPlayer, ICraftPlayerInstance } from "@icraft/player-react";
import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import UserCard from "./UserCard";
 
const USER_ELEMENT_NAME = "User";
 
const style = {
  width: "100%",
  height: "100%",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
export default () => {
  const playerRef = useRef<ICraftPlayerInstance>(null);
  const [tipContainer, setTipContainer] = useState<HTMLDivElement | null>(null);
 
  const onReady = () => {
    const player = playerRef.current;
    const user = player?.getElementsByName(USER_ELEMENT_NAME)?.[0];
    if (user?.tip) {
      const container = document.createElement("div");
      user.tip.updateInnerHTML(container);
      user.tip.updateVisible(true);
      setTipContainer(container);
    }
  }
 
  return (
    <div style={style}>
      <ICraftPlayer
        src="/templates/CacheCluster.iplayer"
        ref={playerRef}
        onReady={onReady}
      />
      {tipContainer &&
        createPortal(
          <UserCard name="John Doe" title="Operations Engineer" />,
          tipContainer
        )}
    </div>
  );
};

API

Tip Instance Methods

Name	Description	Type
updateInnerHTML	Update tooltip content	(innerHTML: HTMLElement) => void
updateVisible	Update tooltip visibility	(visible: boolean) => void
updateHeight	Update tooltip height	(height: number) => void
reset	Reset tooltip (restore to default style showing only name)	() => void

The tooltip instance is accessed through the tip property on the element instance

Animation Addon

Tip

Custom Tooltips

Native Elements

React Elements

API

Tip Instance Methods

Home

Others