Клуб API Карт

Клуб API Карт

Всплывающая подсказка при наведении указателя мыши на балун

Пост в архиве.

Изначально стояла такая задача. Сделать тултип (всплывающую краткую подсказку), которая появляется
при наведении курсора на метку на карте, как здесь http://news.yandex.ru/map/Moscow/news.html

Методом подбора вариантов удалось прийти к следующему http://geoneo.ru/php/helpmap/news1/. Но данное решение не совсем корректно (точнее совершено не корректно) с точки зрения программирования, хотя подобие получилось. 

Если у Вас есть правильное решение этой задачи, прошу прислать поправки на почту geo-bo@ya.ru или выложить здесь.


Спасибо всем, кто откликнулся и оказал реальную помощь. Реализованы два варианта скриптов:

Пример 1, который разработал stalkerexe, размещен на странице http://geoneo.ru/php/helpmap/news1/
Отличительная особенность данного скрипта: tooltip сделан не средствами API, а с помощью интеграции стороннего скрипта.

Второй вариант согласно рекомендациям hevil`а и Саши Белого представленна странице http://geoneo.ru/php/helpmap/news2/

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

13 комментариев
Авторизуйтесь, чтобы оставить комментарий
hevil
28 января 2016, 08:58
У конструктор метки можно задать очень много разных параметров, в т.ч. и разрешить всплывающую подсказку. var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.64, 55.76), {hasHint: true}); placemark.setHintContent('Описание первой точки'); map.addOverlay(placemark); Этого хотел добиться?
webliveby
28 января 2016, 08:58
как здесь http://news.yandex.ru/map/Moscow/news.html то есть я так понял с применением такого стиля к тултипу, или просто добиться показа подсказки?...
Георгий Бондаренко
28 января 2016, 08:58
Еще раз посмотрел исходник http://news.yandex.ru/map/Moscow/news.html. Непохоже, что в этом примере применена просто выпадающая подсказка. Скорее всего, что вроде выпадающего меню или окна, данные для которого берутся из БД. Может я и не прав, но есть визуальные отличия: Скорость открытия окошка в примере Яндекса заметно быстрее, да и реакция на курсор лучше.
webliveby
28 января 2016, 08:58
Выпадающая подсказка реализована средствами CSS и JS
Георгий Бондаренко
28 января 2016, 08:58
Как раз в этом и загвоздка. Пробовал привязать следующий скрипт (нашел где-то в инете) a.tt span{ display:none;/*собственно прячем тултип - пока мышь не наведена*/ } a.tt:hover{ position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/ z-index:23;/*это нужно что бы тултип показывался поверх этой и других ссылок*/ } a.tt:hover span{ display:block;/*показываем тултип при наведении*/ position:absolute; top:-10px; left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/ z-index:22;/*мне 22 + см. выше*/ background:#fafafa;/*фон, что бы было видно тултип*/ } Сам скрипт Текст ссылки Пояснение к ссылке Но столкнулся проблемой выбора типа ссылки. А именно, как подогнать 'a' отсюда к 's' из примера с моего сайта. Менял s на a и наоборот - ноль эффекта.
Георгий Бондаренко
28 января 2016, 08:58
Здесь автоматически раскрылся :) Текст ссылки Пояснение к ссылке
hevil
28 января 2016, 08:58
http://api.yandex.ru/maps/jsapi/doc/ref/reference/hintcontentstyle.xml http://api.yandex.ru/maps/jsapi/doc/ref/reference/hintoptions.xml
webliveby
28 января 2016, 08:58
Сделал два примера с помощью JS и CSS Пример 1 Пример 2
Георгий Бондаренко
28 января 2016, 08:58
Пример 1, который разработал stalkerexe, размещен на странице http://geoneo.ru/php/helpmap/news1/ Отличительная особенность данного скрипта: tooltip сделан не средствами API, а с помощью интеграции стороннего скрипта. Сейчас пытаюсь сделать скрипт согласно рекомендациям hevil`а. По идее, должно получиться тоже самое визуально, но работать будет полностью на основе средств API Яндекса.
rodlex
28 января 2016, 08:58
Например, так: var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.59,55.8), {hasHint: true}); placemark.setHintContent('Всплывающая подсказка'); map.addOverlay(placemark);
Георгий Бондаренко
28 января 2016, 08:58
Вроде как получилось.
gn-ya
28 января 2016, 08:58

пробовал пройти по ссылкам - страница не найдена ошибка 404 ((((

Георгий Бондаренко
28 января 2016, 08:58
Эта проблема появилась в связи с переводом сайта на новую систему управления - полностью изменилась структура

Спасибо, исправим