Здравствуйте. Необходимо реализовать следующий функционал: пользователь нажимает на блок (в примере ниже это li) и над другими блоками появляется текст из атрибута title. При чем текст должен появится над всем указанными блоками и исчезнуть по повторному нажатию на кнопку (или на li). Пробовал сделать вот так
function showTittles() {
var buttShow = document.getElementById("buttShow");
var titlesContainer = document.querySelectorAll("#servicelist1, #servicelist2, #servicelist3");
var buttonsArr = document.getElementById("buttonsArr");
var listItem = buttonsArr.querySelectorAll("#redBlc, #greenBlc, #blueBlc");
var showingTooltip;
var titles = [];
for (var i = 0; i < titlesContainer.length; i++) {
titles.push(titlesContainer[i].getAttribute('title'));
}
listItem.forEach (function (i) {
listItem[i].addEventListener("click", function() {
switch (i) {
case i === 0:
addTitle(0);
break;
case i === 1:
addTitle(1);
break;
case i === 2:
addTitle(2);
break;
default:
consol.log("жми!");
break;
}
})
})
}
function addTitle(elem) {
var target = titlesContainer[elem];
var tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip-title';
tooltipElem.innerHTML = titles[elem];
document.body.appendChild(tooltipElem);
var coords = target.getBoundingClientRect();
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left = 0; // не вылезать за левую границу окна
var top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) { // не вылезать за верхнюю границу окна
top = coords.top + target.offsetHeight + 5;
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
showingTooltip = tooltipElem
}
showTittles();
.servicelist {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
}
#servicelist1 {
border: 1px solid #f00;
}
#servicelist2 {
border: 1px solid #0f0;
}
#servicelist3 {
border: 1px solid #00f;
}
.tooltip-title {
position: fixed;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 arial, sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
- Показать красный тултип
- Показать зеленый тултип
- Показать голубой тултип
Некоторый код брал из этого примера
Сейчас он ругается на addEventListener и я не знаю как сделать так, чтобы по нажатию на отдельный li появлялся личный title над каждым блоком.
P.S в проекте уже есть jquery и bootstrap, так что если легче будет с ними, то подойдет решение с применением этих инструментов, спасибо :)
Ответ
Не совсем понял что вам нужно. Написал как понял. Уточните/напишите если что не так.
В примере используется jquery 2.1.1
(function($) {
$('li').click(function(){
var id = $(this).attr('id');
$(document).find('.servicelist').html('');
$(document).find('.servicelist').html($(document).find('[data-id="'+id+'"]').attr('title'));
});
})( jQuery );
/* Удалить CSS */
body {
display: flex;
flex-wrap: wrap;
}
.servicelist {
margin: 5px;
}
ul#buttonsArr {
width: 100%;
}
/* конец CSS */
.servicelist {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
}
#servicelist1 {
border: 1px solid #f00;
}
#servicelist2 {
border: 1px solid #0f0;
}
#servicelist3 {
border: 1px solid #00f;
}
.tooltip-title {
position: fixed;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 arial, sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
- Показать красный тултип
- Показать зеленый тултип
- Показать голубой тултип
Комментариев нет:
Отправить комментарий