Html hint on div

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

css hint (tooltip) based on hint.css with html content support

istarkov/html-hint

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

based on hint.css with html content support

The main disadvantage of hint.css is it’s inability to show html content inside hint. This css library extends hint.css with html hints.

npm install --save html-hint

div class pl-s">hint--html hint--top"> Place here any element div class pl-s">hint__content"> Place here your tooltip HTML content div> div>

If you are prefer to use css-modules you can use composes

div class= > Place here any element div class= > Place here your tooltip HTML content div> div>

@import 'html-hint' .myClass composes: hint--html composes: hint--top composes: hint--info cursor: pointer .myTooltip composes: hint__content

There are different placement options

• hint—top-left , hint—top , hint—top-right ;
• hint—left , hint—right ,
• hint—bottom-left , hint—bottom , hint—bottom-right ,

And different type options

(To change color you can also use mixin)

.myClass composes: hint--html composes: hint--top @include hint-color(yellow) cursor: pointer

Placement options example

By default tootips are not hoverable, adding hint—hoverable class makes them hoverable.

div class pl-s">hint--html hint--top hint--hoverable"> Place here any element div class pl-s">hint__content"> Place here your tooltip HTML content div> div>

Sometimes you need to set hover by yourself.

Using hint—always class you will make tooltip always visible, using hint—hidden you will prevent tooltip to show.

(both hint—always and hint—hidden will hide tooltip on hover)

npm install npm run start # open http://localhost:4000 and you will get hot reloadable env

Источник

Hint.css — подсказки на чистом CSS3 и HTML5

Подсказки для html элементов не вызывают больших трудностей в использовании у веб-разработчиков. Нужно всего лишь приметить атрибут title и мы получим вывод подсказки при наведении. Стиль такой подсказки будет зависеть от браузера пользователя и не отличаться красотой. Поэтому веб-разработчики придумали массу вариантов как сделать более привлекательные и функциональные решения. Реализовать эксклюзивные подсказки можно по-разному. Большинство использует в своих проектах javascript, но если знания javascript хромают можно легко обойтись и css3 альтернативой.

Hint.css — удобная библиотека для создания подсказок

Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.

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

Использование

Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения ‘hint—top’ — для подсказок над, ‘hint—bottom’ — для подсказок под, ‘hint—left’ — для подсказок слева и ‘hint—right’ — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая ‘hint—error’, ‘hint—info’, ‘hint—warning’ и ‘hint—success’. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс ‘hint—always’.
Следующий атрибут данных, ‘data-hint’, отвечает за то, какой текст будет отображаться при наведении.

Пример

Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint—info и положения снизу hint—bottom. Вот пример кода:

И мы получим такой результат:

Увидеть демо можно здесь.

Источник

CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example

/* Tooltip text */
.tooltip .tooltiptext visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
>

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext visibility: visible;
>

Example Explained

HTML: Use a container element (like ) and add the «tooltip» class to it. When the user mouse over this , it will show the tooltip text.

The tooltip text is placed inside an inline element (like ) with class=»tooltiptext» .

CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.

The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS border-radius property is used to add rounded corners to the tooltip text.

The :hover selector is used to show the tooltip text when the user moves the mouse over the with class=»tooltip» .

Positioning Tooltips

In this example, the tooltip is placed to the right ( left:105% ) of the «hoverable» text (). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

Источник

Всплывающая подсказка на CSS

Рассмотрим реализацию простой текстовой подсказки, всплывающей при наведении мыши на элемент. Особенностью способа является использование только CSS стилей, без JavaScript кода.

Наведите курсор на кнопку 

Для элемента, над которым требуется вывести всплывающую подсказку, добавляем атрибут «data-hint». Он должен содержать простую текстовую строку. Использование html тегов недопустимо.

[data-hint] < position: relative; cursor: hint; >[data-hint]::after < opacity: 0; width: max-content; color: #FFFFFF; background-color: rgba(0,0,0,.7); border-radius: 6px; padding: 10px; content: attr(data-hint); font-size: 12px; font-weight: 400; line-height: 1em; position: absolute; top: -5px; left: 50%; transform: translate(-50%, -100%); pointer-events: none; transition: opacity 0.2s; >[data-hint]:hover::after

Для элементов с атрибутом «data-hint» устанавливаем относительное позиционирование и создаём псевдоэлемент «after». Он будет иметь абсолютное позиционирование и содержимое текстовой подсказки.

• opacity: 0 — устанавливаем полную прозрачность;
• width: max-content — ширина вычисляется в зависимости от содержимого;
• transform: translate(-50%, -100%) — центрирование подсказки по горизонтали над основным элементом;
• pointer-events: none — отключаем события мыши над псевдоэлементом;
• transition: opacity 0.2s — плавное изменение прозрачности;

Позиционирование

Для подсказки справа добавляем элементу класс «hint-right»:

Для позиционирования слева добавляем класс «hint-left»:

Аналогично вывод снизу «hint-bottom»:

В примерах используется небольшой отступ «-5px» от основного элемента. В некоторых случаях его можно установить равным нулю.

Кроме предложенного способа можете воспользоваться готовой миниатюрной css библиотекой «Hint.css». Она предлагает аналогичное решение, но в другом оформлении.

Источник

Hint.css — подсказки на чистом CSS3 и HTML5

Подсказки для html элементов не вызывают больших трудностей в использовании у веб-разработчиков. Нужно всего лишь приметить атрибут title и мы получим вывод подсказки при наведении. Стиль такой подсказки будет зависеть от браузера пользователя и не отличаться красотой. Поэтому веб-разработчики придумали массу вариантов как сделать более привлекательные и функциональные решения. Реализовать эксклюзивные подсказки можно по-разному. Большинство использует в своих проектах javascript, но если знания javascript хромают можно легко обойтись и css3 альтернативой.

Hint.css — удобная библиотека для создания подсказок

Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.

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

Использование

Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения ‘hint—top’ — для подсказок над, ‘hint—bottom’ — для подсказок под, ‘hint—left’ — для подсказок слева и ‘hint—right’ — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая ‘hint—error’, ‘hint—info’, ‘hint—warning’ и ‘hint—success’. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс ‘hint—always’.
Следующий атрибут данных, ‘data-hint’, отвечает за то, какой текст будет отображаться при наведении.

Пример

Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint—info и положения снизу hint—bottom. Вот пример кода:

И мы получим такой результат:

Увидеть демо можно здесь.

Источник