logo标签列表

自动将链接标题添加到内部div标签中

jquerytooltip
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>");  

});

可以分享一下HTML代码吗？这样回答会更容易些。 - Techie
2个回答
2

在JavaScript中连接字符串应该使用+而不是.；

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

此外，请注意不要用引号包装此对象，您代码中的 this 指的是 document 对象，而不是您的 span 元素。
-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>
不需要在回答区发布您的最终结果 :P - l2aelba
但是只显示每个链接的第一个标题。 - girish_327
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接