TippyJS设置interactive为true后气泡内容几乎不可见的问题咨询

问题原因 #

1. 内容节点无实际可见内容：你代码中创建的<a>标签未设置文本、图标等可见内容，渲染后宽高为0。interactive设为true时Tippy会根据内容实际尺寸计算气泡大小，内容尺寸为0时就会出现气泡消失的情况。
2. 配置对象语法错误：现有代码中配置项末尾的注释把配置对象的闭合}包含在内，导致JS语法异常，interactive模式需要加载更多交互相关的配置，读取失败就会触发渲染异常。
3. 自定义属性读取不规范：直接读取DOM元素的url属性不符合Web标准，自定义属性应该通过dataset接口读取，取值异常也可能导致链接渲染异常，进而内容尺寸为0。

解决方法 #

按照以下步骤修改代码即可解决：

• 给创建的<a>标签添加可见内容（文本/图标均可）
• 修正配置对象的语法错误，把闭合}移到注释外
• 改用dataset读取自定义的url属性
• 可以额外显式设置appendTo: document.body避免父元素样式影响

修正后代码 #

let tippyActions = function() {
  var tippys = document.querySelectorAll('*[id^="tippy"]');
  tippys.forEach(tpy => tippy(tpy, {
    content: tippyContent(tpy),
    placement: "left",
    trigger: 'click',
    allowHTML: true,
    hideOnClick: false,
    interactive: true, 
    appendTo: document.body
    // zIndex: 99999
  }))
}

let tippyContent = function (tpy) {
    let buttonsDiv = document.createElement("div")
    let btn1 = document.createElement("a")
    // 改用dataset读取自定义属性，对应DOM上的data-url属性
    btn1.href = `/go/${tpy.dataset.url}`
    // 给a标签添加可见内容
    btn1.textContent = '点击跳转'
    buttonsDiv.appendChild(btn1);
    return buttonsDiv.innerHTML;
}

如果修改后还有问题，可以检查全局CSS是否给Tippy的.tippy-content类设置了opacity: 0、display: none或者负的margin值，这类样式也会导致interactive模式下内容不可见。

内容的提问来源于stack exchange，提问作者xtlc