Логотип
Маковецкий.RU
Ссылка на твиттер

20 комментариев к записи "Всплывающие подсказки на CSS"

  1. Руслан от пишет:

    А можно ли сделать так что бы подсказка вылазила не на картинке, а над картинкой и можно ли поменять форму на произвольную рамки?

    • Никита от пишет:

      Конечно можно. Нужно только с кодом поработать — изменить положение подсказки относительно изображения, задав отступы.

      • Руслан от пишет:

        Тогда нужно покопаться в коде и настроить под себя.

  2. Елена Олейникова от пишет:

    Интересно, а почему блогеры так редко используют всплывающие подсказки? Ладно, пусть не все соображают, как в CSS это сделать, но можно же их вывести просто с помощью тэга title.

    • Никита от пишет:

      Можно, но, как видите, не всем это охота)))

      • Елена Олейникова от пишет:

        Надо тогда какой-нибудь эксперимент поставить, проверить, как влияют такие подсказки на продвижение и, если такое влияние есть (а оно должно быть непременно), рассказать и показать. Тогда точно начнут ставить :-)

        • Никита от пишет:

          Есть такое понятие, как оптимизация изображений, где прописывание атрибутов title и alt является частью оптимизации всей статьи!

        • Елена Олейникова от пишет:

          Ну речь-то не только про изображения, всплывающие подсказки можно сделать практически для любого элемента текста, хоть в точку ее поставь, хоть в ссылку. Изображения само собой, тут даже Яндекс нам рассказывает-показывает, как это лучше сделать.

  3. Евгений от пишет:

    А можно сделать как нибудь чтобы в сплывающей подсказке была ссылка или картинка в виде ссылки на которые можно было бы навести и подсказка не убралась. При этом подсказка бы активировалась при наведении.

    • Никита от пишет:

      Не совсем понял Вас, но вставить ссылку, или картинку-ссылку во всплывающую подсказку можно.

      • Евгений от пишет:

        К примеру дана ссылка Ссылка. Нужно сделать подсказку чтобы в нее можно было поместить другие ссылки так же картинки не оборачивая при этом основную ссылку не в какие теги. Также нужно чтобы подсказка сразу не убиралась и чтобы пользователь мог перейти на те ссылки которые в подсказке. Подскажите как можно это реализовать…

        • Никита от пишет:

          Здесь одним CSS не обойдешься. Придется использовать JavaScript или Jquery, а вот как именно это сделать, к сожалению не могу подсказать.

          • Евгений от пишет:

            а хотя бы как на цсс сделать чтобы в ссылку можно было просто вставить подсказку в виде ссылки и она бы коректно отображалась там…

          • Никита от пишет:

            Я Вам могу посоветовать поискать на Ruseller.com — там есть несколько уроков по Вашему вопросу.

  4. Мурад от пишет:

    Действительно полезная статья.
    Спасибо)

  5. Ира от пишет:

    Я пробовала ставить и второй, и третий вариант, но вторая подсказка у меня всплывает обрезанная, а третья вообще невидимая. Я стараюсь покрутить что-то с z-index и position, пока безрезультатно.

  6. ZGD от пишет:

    А можно ли сделать так, что бы подсказка не моментально появлялась, а возникала плавно? Либо проявляясь из совсем прозрачной в непрозрачную, либо медленно выезжала.

  7. Юрий от пишет:

    День добрый! Спасибо за статью но не получается вставить в подсказку текст-ссылку. Как осуществить ?

  8. Юрий от пишет:

    content: attr(data-text)/ . data-text- не позволяет вставлять теги , , и ссылки

Добавить комментарий

  1. Комментарии, содержащие нецензурную брань, грубейшие грамматические ошибки, или албанскую лексику, удаляются.
  2. В поле "Сайт" можно указывать только ссылку на главную страницу вашего сайта/блога. Ссылки на прочие веб-ресурсы, или партнерские ссылки будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, адреса сайтов. Просьба указывать нормальное имя или ник.
  4. Короткие, бессмысленные кoммeнтapии типа "Спасибо!", "Интересная статья", будут удалены.
  5. Комментарии не по теме, спам, любая реклама в сообщениях будут удалятся.

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: