При наведении курсора на ссылку, которая содержит атрибут 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 и когда я нажимаю на ссылку в меню то при смене страницы у меня подсказка остается на месте как возможно исправить этот момент?
Не за что. Рад знать, что материал для кого-то полезен. На этот вопрос уже ответил.
Спасибо! Просто и эффектно!