javascript - How to add two class styles to anchor tag - Stack Overflow

admin管理员组

文章数量:1335176

I have these classes in my html page.

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

Each of the classes in the <div> tag represents an icon which is clickable. I need to add a javascript tooltip to these icons.

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

I'm using this class in the anchor tag to implement the tooltip in the texts. So how can I use this tooltip in the icons mentioned above?

CSS Code

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

I have these classes in my html page.

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

Each of the classes in the <div> tag represents an icon which is clickable. I need to add a javascript tooltip to these icons.

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

I'm using this class in the anchor tag to implement the tooltip in the texts. So how can I use this tooltip in the icons mentioned above?

CSS Code

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

• javascript
• html
• css

Share Improve this question Follow edited Sep 15, 2012 at 14:04 David G 96.9k4141 gold badges172172 silver badges258258 bronze badges asked Sep 15, 2012 at 14:02 99tharun99tharun 1,21633 gold badges2020 silver badges3737 bronze badges 1

• 1 (Side-note) It's a list. Use UL/LI elements. – Šime Vidas Commented Sep 15, 2012 at 14:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can have two classes for a single HTML element..like this:

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

In JS code, simpleTooltip is only being used as marker class.

When mouse pointer hovers over one of the elements with class simpleTooltip, a tooltip is shown. The code does not require Element to be an anchor element either. The text for tooltip is taken from "title" attribute of the element.

the CSS code defines the class "tooltip", which is used when Jquery dynamically shows actual tooltip on hover. Hope that helps.

Separate the two classes with a space:

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

Generically, class = "a b" means the element has both class a and class b. In other words, if you have this:

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

Then all of: $(".class1"), $(".class2"), and $(".class1.class2") will select the element above.

本文标签： javascriptHow to add two class styles to anchor tagStack Overflow