Tippy.js工具提示插件动画特效

原创已于 2025-06-27 10:52:58 修改 · 564 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-23 14:35:18 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tippy.js工具提示插件动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
font-family: 'Arial', sans-serif;
padding: 20px;
}

h1 {
margin-bottom: 40px;
color: #333;
text-align: center;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1000px;
margin-bottom: 40px;
}

.btn {
padding: 12px 24px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 自定义主题样式 */
.tippy-box[data-theme~="custom"] {
background-color: #ff4757;
color: white;
font-weight: bold;
}

.tippy-box[data-theme~="custom"] .tippy-arrow {
color: #ff4757;
}

.tippy-box[data-theme~="material"] {
background-color: #3742fa;
color: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(55, 66, 250, 0.3);
}

.tippy-box[data-theme~="material"] .tippy-arrow {
color: #3742fa;
}

.tippy-box[data-theme~="light"] {
background-color: white;
color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border: 1px solid #eee;
}

.tippy-box[data-theme~="light"] .tippy-arrow {
color: white;
}

.credit {
margin-top: 20px;
color: #666;
font-size: 14px;
}

.credit a {
color: #3498db;
text-decoration: none;
}
</style>

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css">
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/perspective.css">
</head>
<body>
<h1>Tippy.js工具提示插件动画特效</h1>

<div class="container">

<button class="btn" id="basic-tooltip">基本提示</button>


<button class="btn" id="fade-tooltip">淡入淡出动画</button>


<button class="btn" id="scale-tooltip">缩放动画</button>


<button class="btn" id="perspective-tooltip">透视动画</button>


<button class="btn" id="custom-theme">自定义主题</button>


<button class="btn" id="follow-cursor">跟随光标</button>


<button class="btn" id="delay-tooltip">延迟显示</button>


<button class="btn" id="interactive-tooltip">交互式提示</button>
</div>


<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<script>
// 基本工具提示
tippy('#basic-tooltip', {
content: "这是一个基本的工具提示",
placement: 'top',
});

// 淡入淡出动画
tippy('#fade-tooltip', {
content: "带有淡入淡出动画的提示",
placement: 'top',
animation: 'shift-away',
arrow: true,
});

// 缩放动画
tippy('#scale-tooltip', {
content: "带有缩放动画的提示",
placement: 'top',
animation: 'scale',
arrow: true,
});

// 透视动画
tippy('#perspective-tooltip', {
content: "带有透视动画的提示",
placement: 'top',
animation: 'perspective',
arrow: true,
});

// 自定义主题
tippy('#custom-theme', {
content: "自定义主题的提示",
placement: 'top',
theme: 'custom',
animation: 'scale',
arrow: true,
});

// 跟随光标
tippy('#follow-cursor', {
content: "我会跟随你的光标移动",
placement: 'top',
followCursor: true,
arrow: true,
});

// 延迟显示
tippy('#delay-tooltip', {
content: "我需要500毫秒才会显示",
placement: 'top',
delay: [500, 200], // 显示延迟500ms，隐藏延迟200ms
arrow: true,
});

// 交互式提示
tippy('#interactive-tooltip', {
content: "我可以交互 <button id='close-btn' style='margin-left:10px; padding:2px 8px; background:#ff4757; color:white; border:none; border-radius:4px; cursor:pointer;'>关闭</button>",
placement: 'top',
allowHTML: true,
interactive: true,
arrow: true,
onShow(instance) {
const closeBtn = document.querySelector('#close-btn');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
instance.hide();
});
}
}
});

// 添加Material主题
tippy.setDefaultProps({
theme: 'material'
});
</script>
</body>
</html>