Creating my custom tooltip using jquery plugin

Question

Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem

Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.

I have found so many from stack Overflow but nothing is working out.

Here is the jquery code

$(document).ready(function() {
            $(".tooltip").hide();
            $("#help").on({

                mouseenter: function () {
                    $("#showtooltip").show();
                },
                mouseleave: function () {
                    $("#showtooltip").hide();
                }
            });
            $("#help1").on({
                mouseenter: function () {
                    $("#showtooltip1").show();
                },
                mouseleave: function () {
                    $("#showtooltip1").hide();
                }
            });
            $("#help2").on({
                mouseenter: function () {
                    $("#showtooltip2").show();
                },
                mouseleave: function () {
                    $("#showtooltip2").hide();
                }
            });
        });

Third mouse over was not working. I am trying to creating I think missed something.

Here is the jsbin Link

Kindly help me

Thanks & Regards Mahadevan

Kristijan Iliev · Accepted Answer · 2015-09-13 13:06:58Z

1

Just add this css rules to your .tooltip class:

 position: absolute;
 top: 40px;  /* define how much space from tooltip to the top

and this javascript:

$(document).ready(function() {
                $(".tooltip").hide();
                $("#help").on({

                    mouseenter: function (e) {
                        $("#showtooltip").show();
                        $("#showtooltip").css('left', e.pageX); // added

                    },
                    mouseleave: function () {
                        $("#showtooltip").hide();
                    }
                });
                $("#help1").on({
                    mouseenter: function (e) {
                        $("#showtooltip1").show();
                      $("#showtooltip1").css('left', e.pageX); // added
                    },
                    mouseleave: function () {
                        $("#showtooltip1").hide();
                    }
                });
                $("#help2").on({
                    mouseenter: function (e) {
                        $("#showtooltip2").show();
                        $("#showtooltip2").css('left', e.pageX); // added

                    },
                    mouseleave: function () {
                        $("#showtooltip2").hide();
                    }
                });
            });

I added only this line in javascript mouseenter function:

$("#showtooltip").css('left', e.pageX);

It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.

Customization

If you want the tooltip right of the hovered item, you will need to add this css:

var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);

and change your css top property above.

Update Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:

$(document).ready(function() {
                $(".tooltip").hide();
                $(".help").on({

                    mouseenter: function (e) {
                        var tooltip = $(this).next();                                            tooltip.show();
                        tooltip.css('left', e.pageX + 20);

                    },
                    mouseleave: function () {
                        $(this).next().hide();
                    }
                });

            });

to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.

the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.

Here is a FIDDLE

Cheers

edited Sep 13, 2015 at 13:06

answered Sep 13, 2015 at 10:02

Kristijan Iliev

5,01710 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr.M Over a year ago

@1I13v is this the correct way or can we do in a better way my third tooltip was not working kindly please helpe me

Mr.M Over a year ago

thanks 1I13v whether my coding is correct can we do any alterations for this because i will if i have 30 tooltips code will go long how to reduce this

Mr.M Over a year ago

thanks for helping but with the new code it was not working for all the three tooltip :(

Kristijan Iliev Over a year ago

I put a fiddle to try it

Collectives™ on Stack Overflow

Creating my custom tooltip using jquery plugin

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related