При наведении курсора на ссылку, которая содержит атрибут title, появляется всплывающая подсказка. По умолчанию она не имеет полного оформления, а лишь однообразный вид, не всегда подходящий современному дизайну. Но при помощи одних стилей CSS нет возможности автоматически стилизовать сразу все title на сайте. Поэтому приходится прибегнуть к JavaScript, чтобы добиться желаемого результата.
Весь скрипт состоит из несколько строк, что делает его таким легким и простым. Его суть, если сказать по-простому, добавить title ссылки в блок див за последующим оформлением всплывающих подсказок. Оформление будет произведено средствами CSS, так как вам захочется. Еще один момент, для работы скрипта необходимо подключение библиотеке jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
На первом шаге займемся подключением скрипта. Лучше всего добавить код в уже имеющий файл js, а если нет такого, то создать самому. Затем просто в футере сайта подключить этот файл. Это один из вариантов, можно обычным способом прям в тело файла между тегами <script>…</script>
поместить весь код.
<script> $(function() { $("a").each(function(b) {//работа с элементом (ссылка) if (this.title) { var c = this.title; var x = 0;//расположение по горизонтали(left) var y = 35;//расположение по вертикали (top) $(this).mouseover(function(d) { this.title = ""; $("body").append('<div id="tooltip">' + c + "</div>"); $("#tooltip").css({ left: (d.pageX + x) + "px", top: (d.pageY + y) + "px", opacity: "0.8"//полупрозрачность }).show(300)//скорость появления подсказки }).mouseout(function() { this.title = c; $("#tooltip").remove() }).mousemove(function(d) { $("#tooltip").css({ left: (d.pageX + x) + "px", top: (d.pageY + y) + "px" }) }) } }) }); </script>
Вторым шагом идет стилизация. Ограничений нет, только все в рамках ваших фантазий. На примере показано два варианта:
№1
#tooltip{ background:#000; color:#f3f3f3; text-align:center; padding:6px 0; position:absolute; max-width:250px; z-index:9999; display:none; border-radius:3px; box-shadow:4px 4px 8px rgba(0, 0, 0, 0.3); padding:5px 8px; font-size:12px; text-shadow:none; } #tooltip:before{ position: absolute; width: 0; height: 0; line-height: 0; border: 6px dashed #000; top: -6px; left:15px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; content:''; }
№2
#tooltip { background: #f3f3f3; max-width:250px; border-radius: 3px; box-shadow: 0 0 3px #000; color: #000; display: none; font-size: 12px; padding: 3px 8px; position: absolute; text-align: center; text-shadow: none; z-index: 9999; }
На этом все.
Здравствуйте.
Как сделать, чтобы подсказка появлялась над курсором?
Спасибо.
Здравствуйте. В этом варианте нет особой гибкости с настройками. Можете что-то вроде отрицания сделать
var y = -55;
, но это некорректность. Попробуйте такой вариант tooltip codepen.io/chinchang/pen/lICaqДоброго времени суток. С кодом java script всё понятно – добавлять в футер, а стили – в style.css, я правильно понимаю?
Здравствуйте! Да, вы правильно понимаете. Добавляйте стили в файл style.css или любой другой файл стилей, который подключается к сайту.
Доброго времени суток!
Во первых я хотел сказать спасибо за статью очень полезная спустя столько времени она оказалась для меня =)
А вот мой вопрос какой у меня на сайте сделан переход по страницам с помощью JS и когда я нажимаю на ссылку в меню то при смене страницы у меня подсказка остается на месте как возможно исправить этот момент?
Не за что. Рад знать, что материал для кого-то полезен. На этот вопрос уже ответил.
Спасибо! Просто и эффектно!