首页

关于

使用Qtip2来开发功能强大的删除和信息提示功能

使用Qtip2来开发一个删除和内容提示功能

在线演示

前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库,在这篇文章中我们曾经提到过 Qtip2这个强大的jQuery工具提示插件,这个jQuery插件能够帮助你快速创建强大的工具提示(tooltip)功能。如果大家使用微博的话,肯定会经常类似如下的用户信息界面,这个界面使用的就是一个工具提示功能。使用Qtip2你也可以快速开发出类似的提示功能。

使用Qtip2来开发一个删除和内容提示功能

在接下来的内容中,我们将创建一个博客文章阅读页面,并且提供两个"按钮"来控制"删除"和"喜欢",界面如下:

删除tooltip

使用Qtip2来开发一个删除和内容提示功能

相关信息提示

使用Qtip2来开发一个删除和内容提示功能

以上两个tooltip分别使用点击和hover来触发。

主要相关代码

javascript

倒入相关类库:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script…

标签: jQuery, qtip2, tooltip, 工具提示, 提示

阅读更多

轻量级工具提示jQuery插件 - Tooltipster

轻量级工具提示jQuery插件 - Tooltipster 

在线演示

Tooltipster是一个轻量级的jQuery工具提示插件,可以快速的帮助你生成漂亮的工具提示。

主要特性

  • 工具提示支持HTML标签内容
  • 轻量级
  • 灵活高效
  • 样式定义简单,100%的CSS
  • 支持3种主题
  • 支持firefox,Chrome,IE7/8/9,Opera,Safari

如何使用

HTML 

<h1 class="tooltip" title="This is my image's tooltip message!">Click here</h1>

Javascript

$('.tooltip').tooltipster({
animation: 'slide', // Default: fade
arrow: true, // Default: true
arrowColor: '', // Default: tooltip's background color

标签: jQuery, jquery插件, 工具提示, tooltip

阅读更多

分享7个CSS3的工具提示(tooltip)教程

日期:2012/02/10   来源:GBin1.com

今天我们将分享一系列CSS3的工具提示教程。工具提示经常用来显示额外的信息。当我们创建网站上的链接时,我们都需要添加title来帮助SEO。这些title将会能够在鼠标hover的时候能显示,但是没有非常漂亮的样式。

Bubble Point Tooltips with CSS3 & jQuery

这里Chris Coyier展示了如何使用CSS3和jQuery来重新创建气泡式的工具提示

分享7个CSS3的工具提示(tooltip)教程

CSS3 Tooltips

在这个教程中你将学习如何创建你自己的CSS工具提示,无图片和JS

分享7个CSS3的工具提示(tooltip)教程

How to Create Script-Free CSS3 Tooltips

我们将使用纯CSS3创建一些超棒的工具提示,然后我们将创建一个手机友好的版本,我们将使用一个小js fix - IE9.js

分享7个CSS3的工具提示(tooltip)教程

How to Create Link Tooltips Using CSS3 and JQuery…

标签: 提示, 工具提示, css3, tooltip, tutorial, awesome, css, jquery

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.