3

我想使用 jquery 创建一个 css 工具提示。我的html代码是

<a class="tooltip" href="#" title="My ttitle">Link1</a>

它应该像悬停一样

<a class="tooltip" href="#" title="My ttitle"><div class="classic">My title</div>Link1</a>

如何使用 jQuery 执行此操作？

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //prepend span tag
    var title = $("this").attr("title");
    $(".tooltip").prepend("<div class='classic'>".$(this).attr("title")."</div>");  

});

4

2 回答 2

2

在用于连接字符串的 JavaScript 中，您应该使用;+而不是.

$(".tooltip").prepend("<div class='classic'>" + $(this).attr("title") + "</div>");

另请注意，您不应该this用引号将对象包装起来，并且this在您的代码中引用document对象而不是您的 span 元素。

于 2012-10-01T14:32:50.950 回答
-1

我的最终工作输出是

<html>
        <title>ToolTips Example</title>
        <style type="text/css">
        .tooltip {
            border-bottom: 1px dotted #000000; color: #000000; outline: none;
            text-decoration: none;
            position: relative;
        }
        .tooltip div {
            margin-left: -999em;
            position: absolute;
        }
        .tooltip:hover div {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }
        .tooltip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .tooltip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
        .critical { background: #FFCCAA; border: 1px solid #FF3334; }
        .help { background: #9FDAEE; border: 1px solid #2BB0D7; }
        .info { background: #9FDAEE; border: 1px solid #2BB0D7; }
        .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
        </style>

<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
        $(".tooltip").each(function(){
            $(this).prepend("<div class='classic'>" + $(this).attr("title") + "</div>");
        });
    });
</script>        
</head>

<body>
<a class="tooltip" href="#" title="Hello">Classic</a>
<br />
<a class="tooltip" href="#" title="Second Example">Second Example</a>
</body></html>
于 2012-10-02T07:31:10.710 回答