javascript - 使用tippy.js 创建动态工具提示
问题描述
我用tippy.js创建了多个工具提示内容但我不能制作动态内容。它仅显示第一个工具提示模板。
第二个问题是,当我放入style: display:none
工具提示包装器时,工具提示不显示。当我删除style: display:none
时,工具提示内容显示正常(必须隐藏)。
如何使用子模板制作工具提示?
这里还有 codepen 示例:https ://codepen.io/wpuzman/pen/mQeeRQ
$(document).ready(function() {
$('.box').each(function(){
tippy(this, {
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
placement: 'left',
interactive: true,
theme: 'google',
content: document.querySelector('.tooltip_templates').cloneNode(true)
});
});
});
.wrap {
margin: 150px;
position: relative;
}
.box {
float: left;
margin-right: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<div class="wrap">
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 1</h3>
</div>
</div>
</div>
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 2</h3>
</div>
</div>
</div>
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 3</h3>
</div>
</div>
</div>
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 4</h3>
</div>
</div>
</div>
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 5</h3>
</div>
</div>
</div>
<div class="box">
<img src="https://picsum.photos/50/50" alt="">
<div class="tooltip_templates" style="display: none;">
<div class="tooltip-content">
<img src="https://picsum.photos/150/150" alt="">
<h3>Test image 6</h3>
</div>
</div>
</div>
</div>
解决方案
使用当前元素选择其模板:
$(document).ready(function() {
$('.box').each(function(){
tippy(this, {
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
placement: 'left',
interactive: true,
theme: 'google',
content: this.querySelector('.tooltip_templates')
});
});
});
this.querySelector('.tooltip_templates')
将选择具有该类的孩子作为内容。
您还可以.each()
通过使用以下函数来避免循环content
:
tippy('.box', {
animateFill: false,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
placement: 'left',
interactive: true,
theme: 'google',
content: function (reference) {
return reference.querySelector('.tooltip_templates');
}
});
推荐阅读
- docker - 在 Ubuntu 容器上运行容器
- python - 将numpy ndarrays读入R?
- android - Android 出厂数据重置是否会删除或重置 SD 卡上的“Android”文件夹?
- java - 在 Marathon 应用程序中无法将 java.lang.String 类型的值转换为 double
- c# - C# 跳过或停止下一个函数
- c# - 解决方案加载时添加到 web.config 的神秘行
- laravel - 如何在内部调用接收自定义表单请求验证参数的控制器
- arm - 如何通过STM32f4中的ADC读取电位器的值?
- python - 为时间算法覆盖每次打印的打印行
- html - 无法在 Angular Material 表上设置高度.. 高度溢出容器