0

Добрый день. Нужно сделать всплывающую подсказку над кнопками соцсетей такого вида alt text
подскажите возможные варианты реализации. не код, а общий алгоритм, как это сделать.
html-код кнопок такой

<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 ответа 4

2

Для подсказки вам нужен один див с position: absolute. Пускай при наведении он добавляется в конец body. Получите координаты элемента, около которого нужна подсказка, относительно документа (offset().left/top на jQuery). Относительно этих значений задайте нужные координаты для подсказки.

2
  • да, я примерно так и делаю, вот код jsfiddle.net/YwU2S/2 , только почему-то не срабатывает и вылезает ошибка Uncaught TypeError: Object [object Object] has no method 'on' . В чем тут дело?
    – Heidel
    Commented 6 нояб. 2012 в 18:32
  • напишите: $('.l-cnt__side').on('mouseenter mouseleave','.b-socials__link', function() { ... }); и еще у вас в html ошибка - лишняя одинарная ковычка. Commented 7 нояб. 2012 в 17:18
0

Постройте рамку, которая будет находиться около кнопки. Можно обойтись одной картинкой или этим способом

1
  • нет, у меня есть фоновое изображение для всплывающей подсказки. я просто не могу понять, как сделать так, чтобы она отображалась под нужной кнопкой.
    – Heidel
    Commented 6 нояб. 2012 в 12:16
0

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

либо делай отдельный див на подсказку, спрячь его + показывай при наведении мышки, лови событие onmouseenter, onmouseleave и стать display: none

6
  • получается, если делать скрытые дивы, то их придется делать под каждой кнопкой? это-то как-то не хорошо. в нешний вид всплывающей подсказки в этом плагине редактируется? можно будет задать свой бэкграунд?
    – Heidel
    Commented 6 нояб. 2012 в 15:47
  • конечно можно, смотри css background. конечно под каждой (точнее не под, а где угодно). либо динамически генери. либо одну на все, либо рамку одну, текст разный и задавай относительные координаты. не вижу проблем тут больше
    – vlukham
    Commented 6 нояб. 2012 в 16:40
  • у тебя ошибка в "}); </script> });//]]> </script>" - это шо за фигня? глянь исходник
    – vlukham
    Commented 6 нояб. 2012 в 20:58
  • $('.l-cnt__side').on('mouseenter mouseleave','.b-roundBox .b-socials a.b-socials__link',function(e){ - тут что-то явно неправильно, т.к. алерт не срабатывает, сделай просто onmouseover и внуть через this элементы ищи
    – vlukham
    Commented 6 нояб. 2012 в 21:03
  • и потом, ты алгоритм спрашивал или полностью решение? если просто алгоритм, то тебе его сказали, а нюансы уже сам сможешь допилить, jsfiddle.net/YwU2S/17
    – vlukham
    Commented 6 нояб. 2012 в 21:08
-1

Не очень понимаю какого типа вы хотите всплывающую подсказку, если совсем простую, можно CSS и без jquery. Пример

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.