Good day. Need to make a tooltip above the buttons of social networks of this type alt text
Tell me possible implementation options. not a code, but a general algorithm for how to do this.
html-code buttons

<div class="b-socials"> <a href="#" class="b-socials__link"><img src="images/icon_social-rss.png" alt=""></a> <a href="http://vk.com/larson_holz_it_ltd" class="b-socials__link"><img src="images/icon_social-vk.png" alt=""></a> <a href="http://www.facebook.com/pages/LarsonHolz-It-Ltd/217822734979282" class="b-socials__link"><img src="images/icon_social-fb.png" alt=""></a> <a href="https://twitter.com/#!/Larson_Holz" class="b-socials__link"><img src="images/icon_social-t.png" alt=""></a> <a href="http://lh-broker.livejournal.com/" class="b-socials__link"><img src="images/icon_social-lj.png" alt=""></a> <a href="" class="b-socials__link"><img src="images/icon_social-photo.png" alt=""></a> <a href="" class="b-socials__link"><img src="images/icon_social-heart.png" alt=""></a> </div>

    4 answers 4

    For a hint, you need one div with position: absolute. Let him hover when added to the end of the body. Get the coordinates of the element about which you need a hint, relative to the document (offset (). Left / top on jQuery). Regarding these values, set the desired coordinates for the prompt.

    • Yes, I do something like this, here's the code jsfiddle.net/YwU2S/2 , but for some reason it does not work and an Uncaught TypeError error creeps out: Object [object Object] has no method 'on'. What is the matter? - Heidel
    • write: $ ('. l-cnt__side'). on ('mouseenter mouseleave', '. b-socials__link', function () {...}); and you also have an extra single quote in the html error. - psycho_Octopus

    Build a frame that will be located near the button. You can do with one picture or this way.

    • No, I have a background image for a tooltip. I just can not figure out how to make it appear under the desired button. - Heidel

    http://craigsworks.com/projects/qtip2/

    or do a separate div on the hint, hide it + show it when you hover the mouse, catch the event onmouseenter, onmouseleave and become display: none

    • It turns out, if you do hidden divas, then you have to do them under each button? this is somehow not good. Into the external view of the tooltip in this plugin edited? Can I set my own background? - Heidel
    • Of course you can, see css background. Of course, under each (or rather not under, but anywhere). either dynamically generated. either one for all or one frame, the text is different and set the relative coordinates. I see no problems here anymore - vlukham
    • You have an error in "}); </ script>}); //]]> </ script>" - is this a shit? look source - vlukham
    • $ ('. l-cnt__side'). on ('mouseenter mouseleave', '. b-roundBox .b-socials ab-socials__link', function (e) {- something is clearly wrong here, because the alert is not works, just make onmouseover and enter through this elements - vlukham
    • and then, did you ask the algorithm or completely the solution? if it's just an algorithm, then you have told it, and you can finish the nuances yourself, jsfiddle.net/YwU2S/17 - vlukham

    I do not really understand what type you want a tooltip, if very simple, you can CSS without jquery. Example