`

jQuery Tooltip插件

阅读更多

Cut & Paste Ajax Tooltip script v1.2

Credit: JavaScript Kit

Last update (v1.2 July 10th, 08'): Modified tooltip to follow mouse, added Ajax "loading" message.

Description: This Ajax script enhances the default "title " attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all. Integration is easy and non obtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip's content the very first time the user rolls over the attached element.

Example:

Try moving your mouse over this link to see an Ajax tooltip shown, with its contents dynamically populated from an external file. Or, try it with the below DIV instead:

I am a DIV with an ajax tooltip added! Roll your mouse over here.

Directions:

Step 1: Insert the below into the <head> section of your page:

The code above references two external .js files, plus one image. Download them below:

Step 2: Then to add an ajax tooltip to any element on your page, just use the "title" attribute of HTML as usual, but with the following convention:

<a href="#" title="ajax: external.htm">Some link</a>

where "external.htm " is to relative path to the external page on your server to populate the tooltip using, always proceeded with the keyword "ajax: " to tell the script that this is an ajax tooltip. For testing purposes, here is the "external.htm " file (right click, and choose "Save As") you can quickly use to test out the script.

分享到:
评论

相关推荐

    jquery tooltip插件示例

    在“jquery tooltip插件示例”的项目中,我们可以看到如何利用 jQuery 和特定的 Tooltip 插件创建出美观且实用的页面效果。这个示例可能包括了各种定制选项,如自定义样式、动态触发事件、不同位置的定位以及内容的...

    Jquery ToolTip插件

    jQuery ToolTip插件是一种在网页交互中常用的辅助功能,它能为页面元素提供额外的信息提示。这个插件基于流行的JavaScript库jQuery,使得在网页上创建动态、可自定义的提示框变得极其简单。通过给HTML元素添加`title...

    jquery tooltip插件

    jQuery Tooltip插件是一种在网页上实现提示信息的工具,它基于流行的JavaScript库jQuery构建,旨在为用户提供简单且灵活的方式来展示动态或静态的信息。这个插件的设计理念是方便开发者快速集成到他们的项目中,以...

    Protip | 功能强大的jQuery Tooltip插件

    Protip是一款功能强大的jQuery Tooltip插件。它提供众多的参数和方法来控制Tooltip,可以在49个位置上显示Tooltip,并且可以和animate.css配合制作各种Tooltip过渡动画效果。

    jquery Tooltip简易文本提示框插件

    要使用jQuery Tooltip,首先确保已在项目中引入jQuery库,然后可以通过以下方式引入jQuery Tooltip插件的JS和CSS文件: ```html &lt;!-- 引入jQuery --&gt; &lt;script src="https://code.jquery....

    jQuery tooltip 提示插件

    在jQuery的基础上开发的Tooltip插件,可以方便地集成到任何基于jQuery的项目中,为用户提供更直观的信息展示方式。 在描述中提到,这款jQuery Tooltip插件特别之处在于它支持通过AJAX动态加载提示内容。这意味着...

    Protip是一款功能强大的jQueryTooltip插件

    Protip是一款功能强大的jQuery Tooltip插件。它提供众多的参数和方法来控制Tooltip,可以在49个位置上显示Tooltip,并且可以和animate.css配合制作各种Tooltip过渡动画效果。

    jquery tooltip在表格中的使用

    jQuery Tooltip 是一个非常实用的插件,用于在用户将鼠标悬停在元素上时显示相关信息。在表格中使用 jQuery Tooltip 可以增强用户体验,让用户在不离开当前视图的情况下获取额外的数据或说明。本教程将深入讲解如何...

    jQuery Tooltip

    jQuery Tooltip 是一个基于 jQuery 库的插件,用于在网页元素上显示提示信息。这个插件可以帮助开发者创建具有自定义样式、动态效果和交互性的工具提示。jQuery 的流行在于其简洁的API和丰富的插件库,jQuery ...

    基于bootstrap 3的jQuery tooltip提示插件

    ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。

    Jquery Tooltip 提示框

    2. **poshytip-1.2**: PoshyTip是一个轻量级且高度可定制的jQuery Tooltip插件,它提供了丰富的选项和方法来控制提示框的外观和行为。例如,你可以设置提示的位置(如上方、下方、左方或右方),颜色,透明度,以及...

    jQuery简单实用的tooltip插件

    这是一款简单实用的jQuery tooltip插件。该tooltip插件提供很多参数让你可以控制tooltip的位置、大小、内容和动画等属性,并且还可以设置tooltip的倒计时消失效果,既简单有非常的实用。

    jQuery Tooltip跟随鼠标提示条

    jQuery Tooltip插件则是利用jQuery的灵活性和易用性来实现这一功能,允许开发者轻松地为网页元素添加动态提示效果。 在描述中提到的"处于四个角落时,自动变换位置",意味着这个jQuery Tooltip插件具有智能定位功能...

    jQuery plugin: Tooltip(转)

    jQuery的Tooltip插件是实现这种功能的一种便捷方式。本文将深入探讨jQuery Tooltip插件的原理、实现方法以及如何自定义样式和行为。 首先,让我们理解Tooltip的基本概念。Tooltip通常是一个小型的弹出框,显示与...

    jquery tooltip

    Tooltip插件利用jQuery的强大功能,为开发者提供了一种方便的方式,来创建美观、动态的提示效果,而无需编写大量的自定义代码。 使用jQuery Tooltip插件的基本步骤如下: 1. **引入依赖**:首先,在HTML文件中引入...

    JQuery-Tooltip-Plugin

    《jQuery Tooltip 插件详解与应用实践》 在Web开发中,Tooltip是一种常见的交互元素,它可以在鼠标悬停在特定元素上时显示额外的信息。jQuery作为一款强大的JavaScript库,提供了丰富的插件来增强这种功能,其中之...

    25个优雅的jQuery Tooltip插件推荐

    jQuery Tooltip插件是一种用于在网页上提供额外信息的交互式元素,它可以帮助用户理解页面上的特定元素或功能,提升用户体验。这些插件通常基于jQuery库,一个轻量级且强大的JavaScript库,使得创建动态和响应式的...

    jQuery Tooltip提示框插件实现气泡提示工具栏特效源码.zip

    2. **引入Tooltip插件**:接着,需要引入Tooltip插件的脚本文件,这通常在jQuery库之后引入。如果资源包含此文件,其名为"132686916672962803.js",应确保正确引用。 3. **创建提示框样式**:在CSS文件中定义...

    效果非常棒的tooltip插件

    下面我们将深入探讨Tooltip插件的核心概念、功能以及如何使用这个特定的jQuery Tooltip插件。 【核心知识点】 1. **Tooltip的基本概念**:Tooltip是一种小型的HTML元素,通常以气泡形式出现,用于在鼠标悬停时显示...

Global site tag (gtag.js) - Google Analytics