jquery插件tooltip应用实例[实例]

最新推荐文章于 2023-07-31 10:00:35 发布

AndyYuan10000

最新推荐文章于 2023-07-31 10:00:35 发布

阅读量4k

点赞数

分类专栏： jquery 文章标签： jquery插件 stylesheet function html jquery border

本文链接：https://blog.csdn.net/wwwyuanliang10000/article/details/5683605

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

刚做完成公司项目，剩下的时间来总结下项目所用到的技术要点：

1.tooltip应用：实现的效果为鼠标经过有提示信息，这个和链接<a href="xxx" title="xxx' >xx</a>

属性类似。

2.下面介绍步骤：

2.1 导入jquery插件和tooltip插件（大家可以上网下载）

2.2 调用tooltip的方法

3.代码如下：

    注意：导入js的顺序先导入jquery的包再后为tooltip包。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery tooltip test</title>
<link href="<%=request.getContextPath()%>/css/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.tooltip.js"></script>
<script type="text/javascript">

$(function() {

    $('#right a').tooltip({
        track: true,
        delay: 800,
        showURL: false,
        extraClass: "right",
        fade: true,
        positionLeft: false,
        opacity: 0.3,
        top: -15,
        left: 5 ,
        bodyHandler: function() {
            return $("<img/>").attr("src", "images/163/yeahlogo_middle.gif"); //可以自己写图片的位置
        }
    });

    $("map *").tooltip({ positionLeft: true });

});

</script>
</head>
<body>
        <fieldset>
            <legend>Testing repositioning at viewport borders</legend>
            <p id="right">
                Tooltip with fixed width<br/>
                <a title="Short title" href="http://goggle">Google me!</a><br/>
                <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
            </p>
            <p id="right2">
                Tooltip width auto width<br/>
                <a title="Short title" href="http://goggle">Google me!</a><br/>
                <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
            </p>
            <h3>Code</h3>
            <pre><code class="mix"></code></pre>
        </fieldset>


        <fieldset>
        <legend>Image map with tooltips.</legend>

        <img id="map" src="images/163/karte.png" width="345" height="312" border="0" usemap="#Landkarte">

        <map name="Landkarte">
        <area shape="rect" coords="11,10,59,29"
                href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
        <area shape="rect" coords="42,36,96,57"
                href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
        <area shape="rect" coords="42,59,78,80"
                href="http://www.mainz.de/" alt="Mainz" title="Mainz">
        <area shape="rect" coords="100,26,152,58"
                href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
        <area shape="rect" coords="27,113,93,134"
                href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
        <area shape="rect" coords="100,138,163,159"
                href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
        <area shape="rect" coords="207,77,266,101"
                href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg">
        <area shape="rect" coords="282,62,344,85"
                href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">

        <area shape="rect" coords="255,132,316,150"
                href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg">
        <area shape="rect" coords="78,182,132,200"
                href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
        <area shape="rect" coords="142,169,200,193"
                href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
        <area shape="rect" coords="140,209,198,230"
                href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
        <area shape="rect" coords="187,263,222,281"
                href="http://www.ulm.de/" alt="Ulm" title="Ulm">
        <area shape="rect" coords="249,278,304,297"
                href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
        <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
                href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
        </map>
    </fieldset>

</body>
</html>

AndyYuan10000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件tooltip应用实例[实例]

刚做完成公司项目，剩下的时间来总结下项目所用到的技术要点：1.tooltip应用：实现的效果为鼠标经过有提示信息，这个和链接xx属性类似。2.下面介绍步骤： 2.1 导入jquery插件和tooltip插件（大家可以上网下载） 2.2 调用tooltip的方法3.代码如下：注意：导入js的顺序先导入jquery的包再后为tooltip包。
复制链接

扫一扫