@tippy.js/react中allowHTML等带R标识属性不生效如何解决

问题原因 #

• Tippy.js V6 版本采用插件化架构，allowHTML属于可选独立插件，默认构建版本未内置该能力，仅在组件上声明allowHTML={true}无法触发对应逻辑。你测试时delay、hideOnClick这类属性可以正常生效，是因为这部分属于Tippy默认内置的核心能力，不需要额外引入插件。
• 官方属性文档中标注「R」标识的属性为Tippy核心库原生属性，React封装层不会自动识别未注册插件对应的属性配置，直接传参会被忽略。

allowHTML 正确配置方法 #

不需要额外写dangerouslySetInnerHTML转换逻辑，按以下步骤配置即可直接渲染HTML格式的提示内容：

1. 从tippy.js核心包引入所需插件

import Tippy from '@tippy.js/react';
// 引入allowHTML插件
import { allowHTML } from 'tippy.js';
// 引入基础样式
import 'tippy.js/dist/tippy.css';

2. 给Tippy组件注册插件，同时正常传参即可

<Tippy
  content={tooltip} // 直接传入带HTML标签的字符串内容
  delay={100}
  hideOnClick={false}
  allowHTML={true}
  plugins={[allowHTML]} // 注册插件后属性即可正常生效
>
  {/* 你的触发元素代码 */}
  <div>悬浮触发提示的元素</div>
</Tippy>

其他标「R」原生属性的通用配置规则 #

• 插件类属性（比如allowHTML、animateFill、followCursor等）：先从tippy.js包中引入对应插件，传入组件的plugins数组后，再在组件props上配置对应属性即可正常生效。
• 非插件类核心原生属性：直接写在Tippy组件根props上即可自动透传给核心实例，不需要额外包裹处理。

如果需要全项目统一启用某类原生属性，可以在应用入口配置Tippy全局默认参数，一次性注册插件、设置默认属性值，无需每个业务组件重复配置。

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