CODEWITHSUNDEEP
javascripthtmlcss
99tharun
99tharun

Reputation: 1216

How to add two class styles to anchor tag

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>

Upvotes: 1

Views: 8158

Answers (2)

Chris
Chris

Reputation: 26888

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.

Upvotes: 1

trappedIntoCode
trappedIntoCode

Reputation: 805

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.

Upvotes: 5

Related Questions