Tippy.JS "TypeError: instance.setContent 不是函数"

问题描述

当我尝试在 Tippy.JS 中设置工具提示的内容时，出现错误 TypeError: instance.setContent is not a function。

这是我的代码：

var instance = tippy('#range',{
    placement: 'bottom',content: '',});

$('#range').on('input',function () {
    instance.setContent('Hello World!');
});

解决方法

尽管很奇怪，不管你使用什么类型的选择器，tippy 都会返回一个 ARRAY。那是因为tippy 函数可以根据选择器返回多个项目。例如。

tippy("[notice='tippy']",{
            theme:'light',allowHTML:true,placement: 'bottom',content: contentElement.innerHTML,animation:'scale-subtle',trigger:'click',interactive: true,maxWidth: "none",onShow(instance) {
                instance.setContent(contentElement.innerHTML);
                this.windowHeight = window.innerHeight;
            }
        })

上面的代码选择了所有带有notice属性值为'tippy'的元素，并返回一个Tippy实例数组

[{/*Tippy Object*/},{/*Tippy Object*/}] //Javascript Array of Objects

如果您确定只返回一个元素，我建议您使用 [0] 只返回数组中的那个元素。

let oneTippy = tippy("#tippyElement",onShow(instance) {
                instance.setContent(contentElement.innerHTML);
                this.windowHeight = window.innerHeight;
            }
        })[0]

javascript jquery tippyjs