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

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

2 Answers 2

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.