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、スパン要素ではなくオブジェクトを参照してください。

于 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 に答える