{"id":26539883,"url":"https://github.com/alessandro-pang/leafer-tooltip-plugin","last_synced_at":"2025-07-24T23:02:16.591Z","repository":{"id":185368718,"uuid":"673396880","full_name":"Alessandro-Pang/leafer-tooltip-plugin","owner":"Alessandro-Pang","description":"leafer 提示框插件，可以用于鼠标悬浮展示元素内容","archived":false,"fork":false,"pushed_at":"2023-10-14T07:32:48.000Z","size":1598,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-06T09:26:59.295Z","etag":null,"topics":["leafer-plugin","leafer-ui","leaferjs"],"latest_commit_sha":null,"homepage":"http://alexpang.cn/leafer-tooltip-plugin/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alessandro-Pang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-01T14:28:10.000Z","updated_at":"2024-07-05T01:26:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"494ca11e-2e73-4ecd-b37f-1878bcdb6878","html_url":"https://github.com/Alessandro-Pang/leafer-tooltip-plugin","commit_stats":null,"previous_names":["alessandro-pang/leafer-tooltip-plugin"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Alessandro-Pang/leafer-tooltip-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fleafer-tooltip-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fleafer-tooltip-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fleafer-tooltip-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fleafer-tooltip-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alessandro-Pang","download_url":"https://codeload.github.com/Alessandro-Pang/leafer-tooltip-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fleafer-tooltip-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266920099,"owners_count":24006695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leafer-plugin","leafer-ui","leaferjs"],"created_at":"2025-03-22T00:19:40.077Z","updated_at":"2025-07-24T23:02:16.514Z","avatar_url":"https://github.com/Alessandro-Pang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @Author: zi.yang\n * @Date: 2023-08-01 21:53:46\n * @LastEditors: zi.yang\n * @LastEditTime: 2023-10-14 15:12:48\n * @Description: README\n * @FilePath: /leafer-tooltip-plugin/README.md\n--\u003e\n\n# Leafer Tooltip Plugin\n\nTooltip 插件主要用于 Leafer 元素/节点上 展示一些自定义信息。\n\n使用 Tooltip 插件后，当鼠标悬浮在元素上时，会显示一个弹框展示节点的详细信息。\n\n\u003e 注意：该插件强依赖 leafer-ui@1.0.0-beta.8 至 leafer-ui@1.0.0-beta.12 版本\n\u003e leafer-ui 在 v1.0.0.rc 版本后插件系统更新，部分方法被移除，故无法使用。\n\n在线演示地址：[https://alexpang.cn/leafer-tooltip-plugin/](https://alexpang.cn/leafer-tooltip-plugin/)\n\n基于 Leafer 社区实现的折线图 + Tooltip 实际使用案例：[https://codesandbox.io/p/sandbox/great-frog-w7mkz8](https://codesandbox.io/p/sandbox/great-frog-w7mkz8)\n\nLeafer插件开发教程：[https://juejin.cn/post/7265579369652977718](https://juejin.cn/post/7265579369652977718)\n\n# 快速上手\n\n## 安装\n\n```shell\nnpm i leafer-tooltip-plugin --save\n```\n\n## 使用方法\n\n使用插件时，传入 `getContent` 参数，并返回需要展示的内容即可\n\n```js\nimport { plugin } from 'leafer-tooltip-plugin';\n\nusePlugin(plugin, {\n  getContent(node) {\n    const dom = `\u003cul style=\"list-style: none; margin: 0; padding: 0\"\u003e\n      \u003cli\u003e节点类型：${node.tag}\u003c/li\u003e\n      \u003cli\u003e宽度：${node.width}\u003c/li\u003e\n      \u003cli\u003e高度：${node.height}\u003c/li\u003e\n    \u003c/ul\u003e\n    `;\n    return dom;\n  },\n});\n```\n\n### 效果演示\n\n![效果演示](./readme/image-1.gif)\n\n## 允许限制指定的元素类型\n\n传入 `includeTypes` 参数，限制允许显示提示框的类型\n\n```js\nimport { plugin } from 'leafer-tooltip-plugin';\n\nusePlugin(plugin, {\n  includeTypes: ['Ellipse'],\n  getContent(node) {\n    const dom = `\u003cul style=\"list-style: none; margin: 0; padding: 0\"\u003e\n      \u003cli\u003e节点类型：${node.tag}\u003c/li\u003e\n      \u003cli\u003e宽度：${node.width}\u003c/li\u003e\n      \u003cli\u003e高度：${node.height}\u003c/li\u003e\n    \u003c/ul\u003e\n    `;\n    return dom;\n  },\n});\n```\n\n### 效果演示\n\n![效果演示](./readme/image-2.gif)\n\n## 允许自定义容器类样式\n\n默认情况下，插件会对所有 leafer 实例生效。  \n有时我们只需要指定的实例生效，这时我们可以自定义注册类型。\n\n声明注册类型后，需要将 leafer 实例类型指定为该类型\n\n```js\nimport { plugin } from 'leafer-tooltip-plugin';\n\nusePlugin(plugin, {\n  // 指定注册类型\n  className: 'my-tooltip-plugin',\n  getContent(node) {\n    const dom = `\u003cul style=\"list-style: none; margin: 0; padding: 0\"\u003e\n      \u003cli\u003e节点类型：${node.tag}\u003c/li\u003e\n      \u003cli\u003e宽度：${node.width}\u003c/li\u003e\n      \u003cli\u003e高度：${node.height}\u003c/li\u003e\n    \u003c/ul\u003e\n    `;\n    return dom;\n  },\n});\n```\n\ncss 中添加自定义的类样式\n\n```css\n.my-custom-tooltip{\n  border: 1px solid rgba(0, 157, 255, .62);\n  padding: 6px;\n  background-color: rgb(131, 207, 255);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 400;\n}\n```\n\n### 效果演示\n\n![image](./readme/image-3.png)\n\n## 允许只对指定注册类型的 leafer 生效\n\n默认情况下，插件会对所有 leafer 实例生效。  \n有时我们只需要指定的实例生效，这时我们可以自定义注册类型。\n\n声明注册类型后，需要将 leafer 实例类型指定为该类型\n\ntype 参数介绍：\n\n- 当 type 为布尔类型时：\n  - `type === true`：注册类型默认为 `tooltip-plugin`\n  - `type === false`：全局生效，不进行注册类型\n- 当 type 为字符串时：注册类型为用户传入的类型\n\n```js\nimport { plugin } from 'leafer-tooltip-plugin';\n\nusePlugin(plugin, {\n  // 指定注册类型\n  type: 'my-tooltip-plugin',\n  getContent(node) {\n    const dom = `\u003cul style=\"list-style: none; margin: 0; padding: 0\"\u003e\n      \u003cli\u003e节点类型：${node.tag}\u003c/li\u003e\n      \u003cli\u003e宽度：${node.width}\u003c/li\u003e\n      \u003cli\u003e高度：${node.height}\u003c/li\u003e\n    \u003c/ul\u003e\n    `;\n    return dom;\n  },\n});\n\n\n// leafer 实例指定 my-tooltip-plugin 类型才能生效\nconst leafer = new Leafer({\n  view: window,\n  type: 'my-tooltip-plugin' // 指定插件类型\n})\n```\n\n# 属性列表\n\n| 属性         | 类型 | 说明                     | 默认值｜ |\n| ------------ | ---- | ------------------------ | -------- |\n| type   | `布尔值 or 字符串`  | 自定义注册类型，如果为 `true`, 则默认为 'tooltip-plugin'，如果为空，或者为 false, 则为所有 leafer 注册               | -        |\n| className   | `字符串` | 自定义容器类样式               | -        |\n| includeTypes | `数组` | 允许展示提示框的类型列表 | 所有类型 |\n| getContent   | `函数` | 显示的内容               | -        |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessandro-pang%2Fleafer-tooltip-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falessandro-pang%2Fleafer-tooltip-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessandro-pang%2Fleafer-tooltip-plugin/lists"}