Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 37
В демке с длинным текстом, успевает мелькнуть тултип в одну очень длинную строку — даже скроллбар горизонтальный появиться успевает
Опера
Опера
Очень жаль, что вы совсем не думаете о фолбеке. Ведь что такое тултип? Это просто приукрашенный атрибут
title. Так почему бы вместо data-title не писать настоящий title, а при инициализации скрипта не убирать его, чтобы не мешался, и не использовать текст из него? Опять же, шансов, что какие-то роботы или читалки посмотрят на атрибут title больше, а у data-title шансов никаких.
Это просто приукрашенный атрибут title.
Часто в таком приукрашенном title используют разные теги — жирность, курсив, ссылка, картинка и т.д. Для стандартного title эта смесь может где-то вылезти в итоге. В идеале это должны быть разные строки — одна для стандартного режима работы, а вторая для «приукрашенного».
Простите, вы что собираетесь делать разметку (ссылка, курсив) в data-title??
А где вы ее делать предлагаете?
Странно использовать стороны света вместо top left bottom right принятых в css.
Не кажется ли вам, что указание расположения подсказок в атрибутах — шаг назад? Консорциум, ведь, так борется за семантику…
data-* атрибуты более чем семантичны, нет? Да и где вы предлагаете это указывать?
Как могут быть
Поисковая машина точно знает назначение
data-* более семантичны если даже в названии раскрывается основной их посыл: хранение информации?Поисковая машина точно знает назначение
title и не понимает data-title. По-этому первый атрибут предпочтительней (не во всех случаях).Уточню свой комментарий. Атрибут data-tooltip до боли напоминает align — оба призваны описать стиль.
Альтернативный вариант, указывать класс 'tooltip__position__wh' или т. п.
Альтернативный вариант, указывать класс 'tooltip__position__wh' или т. п.
Ребят, спасибо за фидбэк. Постараюсь максимально объективно ответить на каждый из отзывов.
Проверил, проблема присутствует. Изначально тестировал в этом браузере, но было это до использования
Вы по-своему правы, это глупо отрицать. Но в публикации есть фраза и она ключевая для этого случая: «Решил: напишу-ка я то, что нужно мне и ни строчкой больше.»
Весьма весомое замечание! И вы наверное не поверите, но я использовал
атрибут title удалялся, а текст из него помещался в data-title откуда потом и считывался.
Удаление необходимо было из-за того, что стандартную реакцию нельзя отловить. Но «многоуважаемый» IE плевать хотел на все это и вышеприведенный метод работал только если не удалялся стандартный атрибут, но в этом случае всплывало две подсказки.
Внесу изменения, оставлю data-title только для IE.
nick4fake, вам могу ответить подобающе:
И дополню: писал то, что нужно лично мне и отдал на всеобщее обозрение лишь затем, что хоть с десяток людей будут солидарны с таким подходом.
Названия заимствованы у Tipsy и их цель — использовать модификаторы для сокращения CSS. Преимущество никчемное — экономия десятка символов и, по-этому, основным посылом при именовании была привычка полученная от Tipsy. :)
Не только кажется, а так и есть. Описал свой выбор и последующей за ним решение двумя цитатами выше.
Основной посыл тултипа — простота (simple). Кому нужно больше: используйте Tipsy — отличный вариант.
P.S. В целом я старался писать публикацию так, чтобы какой-нибудь новичок что-то вынес для себя.
В демке с длинным текстом, успевает мелькнуть тултип в одну очень длинную строку — даже скроллбар горизонтальный появиться успевает
Опера
Проверил, проблема присутствует. Изначально тестировал в этом браузере, но было это до использования
white-space:nowrap;, так что дело в этом. Хотя почему наблюдается такое поведения пока неясно — остальные браузеры отрабатывают нормально.Имхо, в качественном тултипе должно быть ещё и авто-позиционирование (когда он появляется там, где хватит места в зависимости от скроллинга), особенно это важно в адаптивных сайтах: раздражает, когда он появляется где-то за границей экрана.
Вы по-своему правы, это глупо отрицать. Но в публикации есть фраза и она ключевая для этого случая: «Решил: напишу-ка я то, что нужно мне и ни строчкой больше.»
Очень жаль, что вы совсем не думаете о фолбеке. Ведь что такое тултип? Это просто приукрашенный атрибут title. Так почему бы вместо data-title не писать настоящий title, а при инициализации скрипта не убирать его, чтобы не мешался, и не использовать текст из него? Опять же, шансов, что какие-то роботы или читалки посмотрят на атрибут title больше, а у data-title шансов никаких.
Весьма весомое замечание! И вы наверное не поверите, но я использовал
title до момента тестов в IE8. Схема была такая:атрибут title удалялся, а текст из него помещался в data-title откуда потом и считывался.
t = $(this);
t.attr('data-title', this.title).removeAttr('title').css('position', t.css('position') == 'static' ? 'relative' : !1);
Удаление необходимо было из-за того, что стандартную реакцию нельзя отловить. Но «многоуважаемый» IE плевать хотел на все это и вышеприведенный метод работал только если не удалялся стандартный атрибут, но в этом случае всплывало две подсказки.
Внесу изменения, оставлю data-title только для IE.
nick4fake, вам могу ответить подобающе:
Замечу, что идея не нова и схожая реализация, скорее всего, существует. По-этому, если вы уже съели парочку тутлтипов и не хотите более, откажитесь от прочтения данного рецепта, ведь он — лишь урок...
И дополню: писал то, что нужно лично мне и отдал на всеобщее обозрение лишь затем, что хоть с десяток людей будут солидарны с таким подходом.
Странно использовать стороны света вместо top left bottom right принятых в css.
Названия заимствованы у Tipsy и их цель — использовать модификаторы для сокращения CSS. Преимущество никчемное — экономия десятка символов и, по-этому, основным посылом при именовании была привычка полученная от Tipsy. :)
Не кажется ли вам, что указание расположения подсказок в атрибутах — шаг назад? Консорциум, ведь, так борется за семантику
Не только кажется, а так и есть. Описал свой выбор и последующей за ним решение двумя цитатами выше.
Основной посыл тултипа — простота (simple). Кому нужно больше: используйте Tipsy — отличный вариант.
P.S. В целом я старался писать публикацию так, чтобы какой-нибудь новичок что-то вынес для себя.
Оставил старую версию с поддержкой IE8 и добавил новую, основной особенностью которой является использование атрибута
P.S. Хотел было дописать существующий плагин, но кол-во кода требующегося только для IE8 было равно 1/4 части существующего.
P.S.2. Не совсем понимаю минусы для данной публикации. Я не претендую на «оскар» и аплодисменты с криками «на бис», а просто попробовал написать пост в котором есть что-то полезное.
title для размещения текста подсказки.P.S. Хотел было дописать существующий плагин, но кол-во кода требующегося только для IE8 было равно 1/4 части существующего.
P.S.2. Не совсем понимаю минусы для данной публикации. Я не претендую на «оскар» и аплодисменты с криками «на бис», а просто попробовал написать пост в котором есть что-то полезное.
- Есть критика/пожелания — напишите комментарий.
- Не нравится реализация — не используйте.
- Надоели тултипы — пожалуйста, пройдите стороной ибо еще в третьем абзаце я просил об этом.
Используйте кнопку «ответить» у соответствующего комментария, иначе вас так и будут минусовать постоянно.
Вот если бы Вы действительно написали тултип с автопозиционированием, то цены бы Вам не было, и я бы сам его ставил у себя. Ну а так, просто статья.
Передергивание в опере — раздражающий фактор.
Не расстраивайтесь: это кредо всех опенсорсников. Вроде делаешь много, распишешь тут, всё по полочкам разложишь, а тебе тут говорят: тут баг, там баг. Это нормально. И если Вы уж сделали продукт с номером версии, то наверно придется собраться и пилить продукт дальше )) Не забавы же ради такой труд проделан…
Успехов ;)
Передергивание в опере — раздражающий фактор.
Не расстраивайтесь: это кредо всех опенсорсников. Вроде делаешь много, распишешь тут, всё по полочкам разложишь, а тебе тут говорят: тут баг, там баг. Это нормально. И если Вы уж сделали продукт с номером версии, то наверно придется собраться и пилить продукт дальше )) Не забавы же ради такой труд проделан…
Успехов ;)
IE9 — без закругленных углов *.
Но IE9 ведь умеет border-radius
Исправил, спасибо.
IE8, к слову, тоже умеет, но при помощи сторонних костылей.
В версии с поддержкой IE8 используется border-radius.htc, размер которого в 10 раз меньше pie.
несколько лет использую вот этот плагин
Второй абзац, первое предложение:
На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap.
разве по ссылке tooltip от Bootstrap?
Перейдя по ссылке вы увидите то, что используете — Tipsy Tooltip. Он используется в Bootstrap. Хотя, на данный момент, его немного переписали.
* bootstrap-tooltip.js v2.3.2
* twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
Странное решение добавить статичный метод к $, а не стандартно плагином $.fn. А как вешать тултип на динамически добавляемые элементы?
tooltip зло для тач устройств. Советую его использовать крайне аккуратно.
Спасибо за статью, есть интересные подходы, в частности, отсутствие блока подсказки как такового.
Но несколько нюансов.
1. Как отрегулировать задержку появления и исчезновения? Показанный случай лишь частность, уступает стандартным тултипам.
2. Чтобы можно было сделать обводку со скруглением (border-radius, box-shadow) вокруг подсказки, tip возможно имело смысл делать не через треугольник бордера, а через поворот (rotation) блока?
3. Подсказки могут уходить за пределы видимости окна, что вообще стоило бы учитывать.
4. Что, если хочется сделать появления тултипа анимированным, хотя-бы фейдом?
5. Что делать с контентом, который хочется отформатировать внутри подсказки?
Но несколько нюансов.
1. Как отрегулировать задержку появления и исчезновения? Показанный случай лишь частность, уступает стандартным тултипам.
2. Чтобы можно было сделать обводку со скруглением (border-radius, box-shadow) вокруг подсказки, tip возможно имело смысл делать не через треугольник бордера, а через поворот (rotation) блока?
3. Подсказки могут уходить за пределы видимости окна, что вообще стоило бы учитывать.
4. Что, если хочется сделать появления тултипа анимированным, хотя-бы фейдом?
5. Что делать с контентом, который хочется отформатировать внутри подсказки?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
simpleTooltip: HTML начиненный CSS и приправленный jQuery