Question

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>

Answer 1

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.