Question

我想使用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>");  

});

Answer 1

在用于连接字符串的JavaScript中，您应使用+代替.;

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

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

Answer 2

我的最终工作成果是

<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>

自动将链接标题附加到div标签内

2 个答案: