Как правильно прописать всплывающие подсказки при наведении указателя мыши?
Конструирую сайт на Joomla 4.4.2. через визуальный конструктор SP Builder Pro. Создан элемент "Raw HTML" с картой края (SVG), CSS элемента прописан (коды прикрепляю). С учетом прописанного кода получаю правильно расположенное изображение карты, с подсвеченной нужным цветом областью, при наведении на которую курсора стрелка превращается в указатель и меняется прозрачность; по нажатию на область осуществляется переход на прописанную страницу (замечательно!).
Однако часть кода, касающаяся класса description, - не работает вообще никак (даже окошко подсказки не формируется). Но даже если бы все работало этот способ создания всплывающих подсказок (описания) требует добавления кода Javascript, который в визуальном конструкторе не поддерживается. Пробовал все делать с помощью расширения Sourcerer от Regular Labs, позволяющего добавлять Javascript, CSS, PHP к любому модулю, элементу, статье и т.д.: в конструкторе создавал и размещал на странице элемент "Модуль Joomla", создавал в модулях джумлы модуль "HTML-код" и в нем с помощью Sourcerer добавлял код HTML, CSS и Javascript (). Итог - не работает. Скорее всего я, мягко говоря, сильно заморочился. Действую интуитивно, не программист. Пожалуйста, отнеситесь снисходительно :)
Собственно, хотелось бы знать наиболее простой способ в моей конкретной ситуации как все же сделать всплывающие подсказки при наведении курсора мыши. Пример на этом сайте - etnodesant.altspu ru. Прямо на главной странице карта, в которой при наведении курсора на некоторые области всплывает подсказка с названием района. Хотелось бы видеть конструктивный ответ.
<div class = "map">
<svg viewBox = "0 0 4167 3111">
<a href="здесь_ссылка_на страницу по щелчку мыши">
<path class="part" d ="здесь_координаты" fill="#ffdd55" description-data="Кулундинский район">
</a>
</svg>
<div class="decription">
</div>
<img src="https://здесь_ссылка_на изображение карты" width="-1" height="-1" alt = "true|false"/>
</div> body {margin: 0; padding: 0;}
.map {
position: relative;
text-align: center;
background:
}
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.part {
opacity: .3;
}
.part:hover {
transition: opacity .2s ease;
opacity: .5;
cursor: pointer;
}
.description {
position: absolute;
padding: 20 px;
box-sizing: border-box;
width: 300px;
height: 400px;
box-shadow: 0 0 32px 10px #ccc;
left: 50px;
bottom: calc(50% - 200px);
} $('.part').hover (
function() {
$('.description').html($(this).attr('description-data'));
$('.description').fadeIn();
},
function() {
$('.description').fadeOut(50);
}
) Для реализации всплывающих подсказок (tooltip) при наведении на карту SVG, вы можете использовать комбинацию HTML, CSS и JavaScript. Поскольку ваш конструктор не поддерживает добавление JavaScript напрямую, мы постараемся минимизировать сложность, чтобы сделать реализацию проще и понятнее.
### Шаг 1: Обновите HTML
Убедитесь, что ваша структура HTML соответствует следующим требованиям:
```html
<div class="map">
<svg viewBox="0 0 4167 3111">
<a href="ссылка_на_страницу">
<path class="part" d="координаты" fill="#ffdd55" data-description="Кулундинский район"></path>
</a>
</svg>
<div class="description" style="display: none;"></div>
<img src="ссылка_на_изображение_карты" alt="карта алтайского края">
</div>
```
### Шаг 2: Обновите CSS
Добавьте и обновите ваш CSS код следующим образом:
```css
body {
margin: 0;
padding: 0;
}
.map {
position: relative;
text-align: center;
}
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.part {
opacity: .3;
}
.part:hover {
transition: opacity .2s ease;
opacity: .5;
cursor: pointer;
}
.description {
position: absolute;
padding: 20px;
box-sizing: border-box;
width: 300px;
box-shadow: 0 0 32px 10px #ccc;
display: none;
background-color: white;
z-index: 100;
}
```
### Шаг 3: Добавьте JavaScript
Для добавления JavaScript используйте расширение Sourcerer от Regular Labs. В модуле добавьте следующий код:
```php
<script>
document.addEventListener('DOMContentLoaded', function() {
const parts = document.querySelectorAll('.part');
const description = document.querySelector('.description');
parts.forEach(part => {
part.addEventListener('mouseenter', function() {
description.innerHTML = this.getAttribute('data-description');
description.style.display = 'block';
description.style.left = (this.getBoundingClientRect().left + window.scrollX) + 'px';
description.style.top = (this.getBoundingClientRect().top + window.scrollY - description.offsetHeight) + 'px';
});
part.addEventListener('mouseleave', function() {
description.style.display = 'none';
});
});
});
</script>
```
Этот скрипт добавляет обработчики событий на элементы с классом `part`, чтобы при наведении курсора отображалась подсказка.
### Шаг 4: Добавьте код в модуль с помощью Sourcerer
В модуле Joomla, используя Sourcerer, создайте новый модуль и вставьте туда ваш HTML, CSS и JavaScript код:
https://codeshare.io/qAQ9XM
Этот код обеспечит корректное отображение всплывающих подсказок при наведении на элементы карты.
Огромное Вам спасибо! Вы очень помогли. Теперь все воспроизводится в лучшем виде!
На будущее: подскажите, пожалуйста, каким образом правильно регулировать местоположение всплывающей подсказки на странице?
Свойство title есть в CSS.
не, жёрик... ты выложи в песочницу... так неохота даже вчитываца!