当前位置: 首页 > 软件库 > Web应用开发 > >

Tippy.js

轻量级 Tooltip 工具库
授权协议 MIT
开发语言 JavaScript TypeScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 邵旺
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Tippy.js 是由 Popper 提供的完整的网络 tooltip、popover、dropdown 和菜单解决方案。它提供了逻辑和可选的元素造型,这些元素从文档流中"pop out",漂浮在目标元素旁边。

  • 智能:将始终以最佳方式漂浮在视野中
  • 通用:兼容鼠标、键盘和触摸输入
  • 可定制:可微调的功能和完全可定制的CSS
  • 输入: TypeScript 支持

安装

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

导入 tippy 构造函数和核心 CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

核心 CSS 与默认的 unpkg import 捆绑在一起。

  • 安利一款轻量的tooltip插件,使用简单,扩展性好,而且作者一直都有更新维护,用在项目中最好不过了。 官方GitHub : https://github.com/atomiks/tippyjs CSDN下载插件: http://download.csdn.net/download/qq_25835645/10147435     简要教程(如下) :     安装 可以通过npm来安装在Tipp

  • tippy.js 源码阅读 tippy 通过 popperjs V2 实现了弹出提示等功能 入口文件 build\bundle-umd.js 初始化 tippy 返回接口实例 Instance: Instance = { // properties id, reference, popper: div(), // 创建div元素, document.c

 相关资料
  • jQueryUI的工具提示小部件取代了原生工具提示。 此小部件添加新主题并允许自定义。 首先让我们了解一下工具提示是什么? 工具提示可以附加到任何元素。 要显示工具提示,只需将title属性添加到输入元素,title属性值将用作工具提示。 使用鼠标悬停元素时,title属性将显示在元素旁边的小框中。 jQueryUI提供了tooltip()方法,可以将工具提示添加到要显示工具提示的任何元素。 与仅

  • 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。 提示工具在鼠标移动到指定元素后触发,先看以下四个实例:.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted #ccc; zcursor: help; color: #006080; } .tooltip .tooltiptex

  • 问题内容: 编写新的工作流引擎还是使用现有的BPM引擎更好吗:jBPM 5,Activiti 5? 我的应用程序是基于Web的应用程序,性能非常重要。我的疑问是,与编写简单的工作流引擎相比,使用jBPM / Activiti是否会增加性能开销。 如果我采用自我实现,我会错过工作流程的可视化。为了性能,可以进行交易。 问题答案: 这确实取决于您的要求。首先,查看您是否真的需要工作流引擎(此资源或其他

  • 本文向大家介绍php轻量级的性能分析工具xhprof的安装使用,包括了php轻量级的性能分析工具xhprof的安装使用的使用技巧和注意事项,需要的朋友参考一下 一、前言   有用的东西还是记录下来吧,也方便以后的查询;这次记录一下xhprof的安装使用;   xhprof是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,   还可以用在生产环境中,也可

  • 当您需要描述链接时,工具提示很有用。 该插件的灵感来自Jason Frame编写的jQuery.tipsy插件。 从那时起,工具提示已更新为无图像,使用CSS动画制作动画,以及本地标题存储的数据属性。 如果您想单独包含此插件功能,那么您将需要tooltip.js 。 另外,如Bootstrap插件概述一章所述,您可以包含bootstrap.js或缩小的bootstrap.min.js 。 用法 (

  • 我正在使用tippy.js生成工具提示。一切都很好,但我有分配的工具提示每个不同的图像内容加载。为了减少加载时间,我想在工具提示可见时将图像延迟加载到apear。 我知道tippy.js有一个内置函数来调用AJAX内容(https://atomiks.github.io/tippyjs/ajax/)-但是我想要加载的内容是超文本标记语言,我不想为每个工具提示编写单独的javascript。理想情况