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

次のように、1 つの HTML 要素に対して 2 つのクラスを使用できます。

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

JS コードでは、simpleTooltip はマーカー クラスとしてのみ使用されています。

クラス simpleTooltip を持つ要素の 1 つにマウス ポインターを合わせると、ツールヒントが表示されます。このコードでは、Element がアンカー要素である必要もありません。ツールチップのテキストは、要素の "title" 属性から取得されます。

CSS コードはクラス "tooltip" を定義します。これは、Jquery がホバー時に実際のツールチップを動的に表示するときに使用されます。それが役立つことを願っています。

于 2012-09-15T14:09:22.793 に答える
1

2 つのクラスをスペースで区切ります。

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