1

我的 html 页面中有这些类。

                    <div class="linkFunctions">
                        <a class="openLink"></a>
                        <a class="newLink"></a>
                        <a class="deleteLink"></a>
                        <a class="duplicateLink"></a>
                        <a class="viewLinkCode"></a>
                        <a class="linkTags"></a>
                    </div>

标签中的每个类都<div>代表一个可点击的图标。我需要为这些图标添加一个 javascript 工具提示。

<a title="Dashboard" class="simpleTooltip" href="#">

我在锚标记中使用这个类来实现文本中的工具提示。那么如何在上面提到的图标中使用这个工具提示呢？

CSS 代码

.tooltip {
    display:none;
    position:absolute;
    opacity: 0.80;
    font-size:14px;
    width: auto;
    background-color:#000;
    padding:10px;
    color:#fff;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

Javascript

    <script type="text/javascript">
        $(document).ready(function() {
            $('.simpleTooltip').hover(function() {
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
               .appendTo('body')
               .fadeIn('slow');
            }, function() {
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
            }).mousemove(function(e) {
                var mousex = e.pageX + 2;
                var mousey = e.pageY - 60;
                $('.tooltip')
                .css({ top: mousey, left: mousex })
            });
        });
    </script>
4

2 回答 2

5

一个 HTML 元素可以有两个类。像这样：

<a class="openLink simpleTooltip" title="put tooltip text like this"></a>
<a class="newLink simpleTolltip" title="some more tooltip text"></a>

在 JS 代码中，simpleTooltip 仅用作标记类。

当鼠标指针悬停在具有类 simpleTooltip 的元素之一上时，将显示一个工具提示。该代码也不要求 Element 是锚元素。工具提示的文本取自元素的“title”属性。

CSS 代码定义了类“工具提示”，当 Jquery 在悬停时动态显示实际工具提示时使用该类。希望有帮助。

于 2012-09-15T14:09:22.793 回答
1

用空格分隔两个类：

<div class="linkFunctions">
    <a class="openLink simpleTooltip"></a>
    <a class="newLink simpleTooltip"></a>
    ....
</div>

通常，class = "a b"意味着元素同时具有 classa和 class b。换句话说，如果你有这个：

<div class = "class1 class2">Glee is awesome!</div>

然后所有的: $(".class1"), $(".class2"), 和$(".class1.class2")将选择上面的元素。

于 2012-09-15T14:09:33.323 回答