Pull to refresh

тултип

Reading time 1 min
Views 641
Lumber room
задача: сделать тултип посредством CSS не используя JavaScript

проблема: для линка родителя нельзя использовать position:relative;
соответственно <span> который внутри — нельзя разместить при помощи position:absolute;

есть ли у кого-то решение для такой задачи? или без позиционирования никак не обойтись?
Total votes 7: ↑4 and ↓3 +1
Comments 15

JQuery tooltip widget

Reading time 4 min
Views 4K
Lumber room
Доброго времени суток.
Решил опубликовать пост, который принес инвайт.
Недавно закончил работу над виджетом для JS библиотеке JQuery. Конечно на данный момент есть аналоги, и даже некоторые приведены здесь. Но во всех реализациях есть определенные недостатки и недоделки, к сожалению, эта реализация также не избежала некоторых проблем, но как кажется, преимущества его намного перекрывают все недоделки. Может быть кому-то он понравится, и кто-то решит исправить, доделать или улучшить реализацию, то милости прошу.

Итак, начнём.
С начала, ссылка на страницу для скачивания исходных кодов: скачать.
А также, сразу же, страница с примерами и демонстрацией работы и примерами исходного кода: пример
Что же нам нужно для работы всплывающей подсказки? Нам для этого потребуется сама библиотека JQuery 1.3 (можете взять последнюю версию здесь), Position plugin больше можно прочесть с этой вики страницы, Template plugin позволяет задавать строку шаблона, и на основе JSON параметров, подстановка которых в шаблон выдает заполненную строку.
Читать дальше →
Total votes 8: ↑5 and ↓3 +2
Comments 9

simpleTooltip: HTML начиненный CSS и приправленный jQuery

Reading time 8 min
Views 32K
Website development *CSS *jQuery *
Tutorial


Каждый знает что такое тултип. Кто-то находит их крайне полезными, а кто-то обходит стороной. Судьба предрешила отнести меня к первой категории.

На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…
Ознакомиться с рецептом
Total votes 68: ↑46 and ↓22 +24
Comments 37

Универсальные подсказки на jQuery

Reading time 3 min
Views 11K
CSS *jQuery *HTML *
Recovery mode
Sandbox
Доброго времени суток уважаемые читатели. Хочу представить вашему взору свой маленький плагин реализованный на jQuery. Плагин призван универсализировать создание всплывающих подсказок (tooltips).
Ранее я находил множество кодов для решения проблем с подсказками и ошибками при валидации, но все они были тяжеловесными и не очень универсальными. Это привело к тому, что я занялся разработкой своего плагина в обход существующим.
Главной задачей, было сделать так, чтобы выводом подсказок можно было управлять, но при этом не лезть в сам JS код.
Второй задачей было впихнуть в код столько функционала, чтобы подсказки могли выводится как слева/справа/снизу/сверху, так и была прилеплена к курсору мыши.
Третей задачей (зачем вообще было реализовывать на JS) было центрирования подсказки, относительно наведенного объекта.
Читать дальше →
Total votes 14: ↑6 and ↓8 -2
Comments 19

Знакомимся с элементами управления библиотеки WinJS

Reading time 5 min
Views 14K
Microsoft corporate blog JavaScript *Development for Windows Phone *


Всем привет!

Сегодня мы с вами будем говорить об элементах управления библиотеки WinJS, об основных вещах, которые нужно знать при создании приложений с ее помощью.
Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Comments 2

Новый пользователь вашего продукта — как ему помочь?

Reading time 6 min
Views 22K
Web design *Interfaces *Usability *Mobile applications design *Game design *
Так ли понятен пользователю интерфейс Вашего продукта, как Вам кажется? Сможет ли пользователь быстро оценить его достоинства и остаться с Вами надолго?



В статье ниже я рассмотрю концепцию “обучения во взаимодействии” на примере абстрактной web-системы. Данный подход хорошо можно объяснить примером из современного игрового мира. Сначала вы проходите tutorial. Вам на плечи не вешают сразу килотонны обучающего материала. Вас ведут по ранней стадии игры, в нужное время выдавая подсказки. Например, при первом взаимодействии с новым объектом игры. Накапливается положительный опыт. Вы обучаетесь взаимодействовать. Рискну предположить, что скорее всего Вы считаете себя продвинутым пользователем, когда речь касается приложений. Как и большинство из них вы мгновенно жмёте на кнопку “Пропустить” / “Приступить к работе” …
Но на самом деле...
Total votes 43: ↑32 and ↓11 +21
Comments 48

Создание динамического tooltip в Angular2+ приложениях

Reading time 8 min
Views 11K
Angular *TypeScript *
Tutorial
Sandbox

В нашем приложении передо мной встала задача о создании красивого тултипа, в Angular Material таблице. Дизайн нам нарисовали, и я начала поиск в интернете нужных материалов. Но натыкалась уже или на готовые решения(библиотеки) или на очень простые решения, которые мне не подходили. В итоге объединив кучу статей и каких то заметок, я сделала тултип который при наведении рассчитывает высоту строки таблицы, длину от места наведения до конца и показывает список из людей. Для чего такие сложности? Да просто потому что, количество человек может быть разным и всех надо отобразить без "наезда" друг на друга, ну и сама иконка с количеством человек(при наведении на которую показывается тултип) может находиться в разных метах
Итог выглядит так:


image

Читать дальше →
Total votes 17: ↑15 and ↓2 +13
Comments 8

Тултипы (tooltips). Что это такое и как их проектировать

Reading time 5 min
Views 13K
Web design *Website development *Usability *Prototyping *Design
Tutorial

Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.

Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.

Читать далее
Total votes 4: ↑4 and ↓0 +4
Comments 1

React, всплывающие подсказки (tooltips), для самых маленьких

Reading time 11 min
Views 3.3K
CSS *JavaScript *ReactJS *TypeScript *
Tutorial
Recovery mode

Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки - tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих подсказок.

К статье
Total votes 2: ↑1 and ↓1 0
Comments 13