带jQuery Bootstrap风格工具提示 工具提示.js

  • 源码大小:6.17KB
  • 所需积分:1积分
  • 源码编号:19JP-3810
  • 浏览次数:991次
  • 最后更新:2023年07月25日
  • 所属栏目:工具提示
本站默认解压密码:19jp.com 或 19jp_com

简介

一个很小的jQuery插件,它可以在任何元素上附加Bootstrap风格的工具提示,而不必包含Bootstrap框架。

如何使用它:

1.在HTML文档中加载Tooltip.js插件的缩小版本。

<link rel="stylesheet" href="jquery.tooltip.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.tooltip.min.js"></script>

2.添加数据切换=“工具提示”属性,并使用标题属性来定义工具提示文本,如下所示:

<button 
  data-toggle="tooltip" 
  title="Tooltip Content Here"
  >Hover Me
</button>

3.确定工具提示的位置。默认值:“底部”。

  • 顶部
  • 底部
  • 左边
  • 正确的
<button 
  data-toggle="tooltip" 
  title="Tooltip Content Here"
  data-placement="right"
  >Hover Me
</button>

预览截图