Tooltip
By calling methods on the tip instance of an element instance, you can update the tooltip's content, style, height, and more.
Custom Tooltips
Below is an example showing how to use native elements as tooltips
<!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 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
