Pull to refresh

Comments 37

В демке с длинным текстом, успевает мелькнуть тултип в одну очень длинную строку — даже скроллбар горизонтальный появиться успевает
Опера
Имхо, в качественном тултипе должно быть ещё и авто-позиционирование (когда он появляется там, где хватит места в зависимости от скроллинга), особенно это важно в адаптивных сайтах: раздражает, когда он появляется где-то за границей экрана.
Как например на новом дизайне твитча если навести на список просматривающих стрим, то вылезет тултип и всё съедет (P.S. Если экран не больше 1366x680, и тултип появляется за границей страницы)
Очень жаль, что вы совсем не думаете о фолбеке. Ведь что такое тултип? Это просто приукрашенный атрибут title. Так почему бы вместо data-title не писать настоящий title, а при инициализации скрипта не убирать его, чтобы не мешался, и не использовать текст из него? Опять же, шансов, что какие-то роботы или читалки посмотрят на атрибут title больше, а у data-title шансов никаких.
Это просто приукрашенный атрибут title.


Часто в таком приукрашенном title используют разные теги — жирность, курсив, ссылка, картинка и т.д. Для стандартного title эта смесь может где-то вылезти в итоге. В идеале это должны быть разные строки — одна для стандартного режима работы, а вторая для «приукрашенного».
Простите, вы что собираетесь делать разметку (ссылка, курсив) в data-title??
Если вы хотите делать разметку, то это делается так:

<a data-tooltipID="1">LInk for tooltip</a>
<div id="1" class="tooltip">Some content with HTML markup</div>

А вы похоже говорите или о тегах в data-title, либо о костылях в виде использований символов (*bold, ^italic), что ужас живоописуемый.
Можно и так, но это будет уже сложнее рулить. Впрочем, я с вами согласен. Засовывать в атрибут тега дополнительную разметку — это отвратительный вариант.
Странно использовать стороны света вместо top left bottom right принятых в css.
UFO just landed and posted this here
Не кажется ли вам, что указание расположения подсказок в атрибутах — шаг назад? Консорциум, ведь, так борется за семантику…
data-* атрибуты более чем семантичны, нет? Да и где вы предлагаете это указывать?
Как могут быть data-* более семантичны если даже в названии раскрывается основной их посыл: хранение информации?

Поисковая машина точно знает назначение title и не понимает data-title. По-этому первый атрибут предпочтительней (не во всех случаях).
Уточню свой комментарий. Атрибут data-tooltip до боли напоминает align — оба призваны описать стиль.
Альтернативный вариант, указывать класс 'tooltip__position__wh' или т. п.
Ребят, спасибо за фидбэк. Постараюсь максимально объективно ответить на каждый из отзывов.

В демке с длинным текстом, успевает мелькнуть тултип в одну очень длинную строку — даже скроллбар горизонтальный появиться успевает
Опера

Проверил, проблема присутствует. Изначально тестировал в этом браузере, но было это до использования 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 и добавил новую, основной особенностью которой является использование атрибута title для размещения текста подсказки.

P.S. Хотел было дописать существующий плагин, но кол-во кода требующегося только для IE8 было равно 1/4 части существующего.

P.S.2. Не совсем понимаю минусы для данной публикации. Я не претендую на «оскар» и аплодисменты с криками «на бис», а просто попробовал написать пост в котором есть что-то полезное.

  • Есть критика/пожелания — напишите комментарий.
  • Не нравится реализация — не используйте.
  • Надоели тултипы — пожалуйста, пройдите стороной ибо еще в третьем абзаце я просил об этом.
Стиль вашей статьи, поход к презентации материала и посыл, больше похожи на предложение пользоваться готовым продуктом, нежели пользовательской разработкой. Возможно вы перестарались, но вы молодец!
Используйте кнопку «ответить» у соответствующего комментария, иначе вас так и будут минусовать постоянно.
Вот если бы Вы действительно написали тултип с автопозиционированием, то цены бы Вам не было, и я бы сам его ставил у себя. Ну а так, просто статья.
Передергивание в опере — раздражающий фактор.
Не расстраивайтесь: это кредо всех опенсорсников. Вроде делаешь много, распишешь тут, всё по полочкам разложишь, а тебе тут говорят: тут баг, там баг. Это нормально. И если Вы уж сделали продукт с номером версии, то наверно придется собраться и пилить продукт дальше )) Не забавы же ради такой труд проделан…
Успехов ;)
UFO just landed and posted this here
IE9 — без закругленных углов *.

Но IE9 ведь умеет border-radius
Ну так и css3pie не только border-radius реализует.
Второй абзац, первое предложение:
На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap.
разве по ссылке tooltip от Bootstrap?
Странное решение добавить статичный метод к $, а не стандартно плагином $.fn. А как вешать тултип на динамически добавляемые элементы?
tooltip зло для тач устройств. Советую его использовать крайне аккуратно.
UFO just landed and posted this here
Спасибо за статью, есть интересные подходы, в частности, отсутствие блока подсказки как такового.
Но несколько нюансов.
1. Как отрегулировать задержку появления и исчезновения? Показанный случай лишь частность, уступает стандартным тултипам.
2. Чтобы можно было сделать обводку со скруглением (border-radius, box-shadow) вокруг подсказки, tip возможно имело смысл делать не через треугольник бордера, а через поворот (rotation) блока?
3. Подсказки могут уходить за пределы видимости окна, что вообще стоило бы учитывать.
4. Что, если хочется сделать появления тултипа анимированным, хотя-бы фейдом?
5. Что делать с контентом, который хочется отформатировать внутри подсказки?
Sign up to leave a comment.

Articles