data-context-card

一个专为 AI生成页面设计的工业级轻量悬浮卡片投影引擎。

data-context-card 诞生自对大厂臃肿 UI 库的冷酷审视。它与传统的 Tooltip 库有着本质的不同：

1、不命令式传递死板的参数或采用容器包裹，而是声明式无侵入增强。

2、它天然支持原生 HTML5 <template> 动态克隆，同时保持对 React Portal 和 Vue Teleport 的完美兼容。

快速开始

无需任何前端框架，直接利用原生html5 <template>标签，实现无缝的 DOM 投影。

1、引入框架

通过 <script defer> 加载，内联执行初始化。

<script defer src="data-context-card.umd.js" onload="DataContextCard.init()"></script>

当然你也可以使用esm语法引入并初始化。

2、定义模板

创建 <template> 作为投影内容。

<template id="card"> <div>投影内容</div> </template>

3、声明触发

给触发元素添加 data-context-card 属性，值为模板 ID。

<span **data-context-card**="card">悬停查看</span>