自定义bettertip提示框，鼠标悬停显示提示框

bettertip（下面有文档部分说明）

bettertip是插件jQuery库，允许你创建自定义的工具提示。

它是基于Cody'sLindleyjTip但是，它灵活得多。

我写的显示效果:

html部分代码：

<link rel="stylesheet" href="/static/bettertip/jquery.bettertip.css" type="text/css" />
<script type="text/javascript" src="/static/bettertip/jquery-1.1.3.1.js"></script
<script type="text/javascript" src="/static/bettertip/jquery.bettertip.js"></script>

 

<a id="mylink" href="demo/harvest?width=160" class="betterTip" title="$none">
   <img src="/static/img/wenhao1.png" style="margin-bottom: 10px;">
</a>

Controller代码：

package com.main.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
@RequestMapping("/demo")
public class BlackboardController extends BaseController {
    /**
    * 收入
     */
    @RequestMapping("/harvest")
    @ResponseBody
    public String harvest() {
        String harvest = "现金收入总金额 : " + 345.72+ "<br>" + "赠送收入总金额 : " + 209.78;
        return harvest;
    }
}

文档部分说名：

这就是bettertip可以做：

动态提示的分区	动态工具提示的A元件
静态div提示	静态元件“A”的工具提示
工具提示的标题	工具提示的标题相同的文章

下载bettertip

文件：

使用bettertip你已经获得了第一jQuery库。
接下来，您需要下载bettertip。此下载包含bettertip压缩版本以及压缩版本。它还包含了所有CSS文件和图像。压缩了的图像是与未压缩版本10.4kb12.4kb。

在报头部分中的页面使用bettertip，你需要添加
引用jQuery，bettertip，bettertipCSS文件如下：

<link rel="stylesheet" href="path-to/BetterTip/jquery.bettertip.css" type="text/css" />
<script type="text/javascript" src="path-to-jquery/jquery-1.1.3.1.js"></script
<script type="text/javascript" src="path-to/BetterTip/jquery.bettertip.js"></script>

现在您可以设定bettertip选项。这个步骤是可选的，但是是我们的朋友在ifieldgood.org和TPC杂志。
只有三种选项，具体如下：

• openwait的毫秒用户悬停之前应打开默认工具提示(500)
• ——closewait的毫秒数的持续开放，在用户将鼠标移出(默认：0）
• enablecache——真或假，或指示不应高速缓存Ajax调用(默认:true)

<script type="text/javascript">
$(function(){
BT_setOptions({openWait:2000, closeWait:4000, enableCache:false});
})
</script>

你可以告诉bettertip打开的工具提示DIV或一个元件。
您可以创建一个对的A元件如下：

<a id="mylink" href="ajax.cfm?width=250" class="betterTip" title="$none">
Dynamic tooltip an 'a' element
</a>

在A必须有一个元素ID和其类属性设置为bettertip。在标题指示什么属性的标题工具提示。有两种特殊值可以使用的标题。使用没有美元如果你不想要的标题或标题栏，然后您可以使用$内容如果你想要的标题相同的用户悬停在文本中。

例：

<a id="mylink" href="$mydiv?width=500" class="betterTip" title="$content">
Static tooltip an 'a' element
</a>
<div id="$mydiv" style="display:none;">
Here is the content for the tooltip!
</div>

工具提示出现以使一个以上的DIV，这一概念同样适用。这里的格式是：

<div class="betterTip" id="div1" style="background-color:#eeeeee;">
<a id="a1" href="ajax.cfm?width=300" class="betterTip" title="$none"></a>
Dynamic tooltip for a div
</div>

您只需把空白A内部的DIV。此外，确保了A和DIV有唯一ID和他们都有着一个类属性等于bettertip。