Css tooltips with image

39 CSS Tooltips

Collection of HTML and CSS tooltip code examples (animated, with arrows, with hover effects, etc.) from CodePen, GitHub, and other resources. Update of May 2021 collection. Five new examples.

Author

Links

Made with

About a code

Simple Tooltips with No Extra Pseudo-Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Tooltip

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Rounded Tooltip CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Tooltip Appear

Using clip-path: path(. ) to create an appear effect consisting of repeated shapes. Here the effect is used for tooltips.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Emerging Tooltip

Emerging tooltip popup example. A demo using a couple of different CSS techniques. SVG line animation, Multiple filter: drop-shadow, Material UI easing, …

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS 1 Element Gradient Tooltip

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

The abbr element

The HTML abbr element represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else. We can use CSS to style it and make it look a little nicer. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Cooltipz.css — Cool Tooltips Made from Pure CSS

A pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animate Tooltip

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Tooltip Animation

Simple tooltip animation in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Tooltip Only CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Adaptive Tooltips

HTML and CSS adaptive tooltips.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Fancy & Animated Tooltip — CSS Only

Simply a tooltip with a shiny/modern opening animation. Easy-to-use: only the custom attribute data-tooltip has to be added to the respective element. Elements that can’t contain other elements, such as input , can’t use the tooltip. A simple solution would be to wrap the element in a div and then attach the tooltip to the div .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Tooltip Idea

Playful little tooltip ideas.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Tooltip

Pure CSS laser line tooltip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Flyout Tooltip

Simple CSS only flyout tooltip.

Author

Источник

Тултипы на CSS3 и HTML5

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

Дисклеймер

На самом деле, css attr() для свойства псевдоэлемента content появился в CSS2 и в данном способе, в общем-то, нет ничего нового.

Простой способ

Этот способ сгодится там, где нужны небольшие «тултипчики» — всплывающие подсказки.

.tooltip < border-bottom: 1px dotted #0077AA; cursor: help; >.tooltip::after < background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #FFF; content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */ margin-top: -24px; opacity: 0; /* Наш элемент прозрачен. */ padding: 3px 7px; position: absolute; visibility: hidden; /* . и скрыт. */ transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */ >.tooltip:hover::after < opacity: 1; /* Показываем его */ visibility: visible; >

Мы берём некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.
Думаю, остальные свойства понятны по комментариям в коде.

Отдельно хочу отметить, как ведёт себя анимация в Chrome и Opera (Возможно и в IE, за его отсутствием проверить я не имею никакой возможности).
Её нет. Связано это с тем, что WebKit и Opera не применяют transitions и animation к псевдоэлементам ::before и ::after.
По этому поводу в багтрекере WebKit зарегистрирован баг.

Способ для более сложных тултипов

Иногда в тултипе должен быть не просто текст, но и некое форматирование или изображение, которое в предыдущий способ не вставишь.

Далее я рассмотрю лишь пример того, что можно сделать этим способом.

.htooltip span < /* Внешний вид нашего тултипа */ background-color: rgba(0,0,0, 0.8); border-radius: 15px 15px 15px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #fff; margin-left: 2px; margin-top: -75px; opacity: 0; /* Делаем его прозрачным */ padding: 10px 10px 10px 40px; position: absolute; text-decoration: none; visibility: hidden; /* И прячем */ width: 350px; z-index: 10; >.htooltip:hover span < /* По hover отображаем тултип */ opacity: 1; visibility: visible; >.htooltip span img < /* Изображение для примера */ border: 0 none; float: left; margin: -71px 0 0 -234px; opacity: 0; position: absolute; visibility: hidden; z-index: -1; >.htooltip:hover span img < /* Показываем изображение */ opacity: 1; visibility: visible; >

Всё просто. Данные примеры можно лицезреть на этой страничке.

P.S. Некоторые спросят: А где же HTML5? В статье упомянуты data-* атрибуты, являющиеся частью спецификации HTML5.

Источник

Creating Tooltips for Images with CSS

Cascading Style Sheets (CSS) are used in Web development to format Web page text, layout Web pages, and enhance hyperlinks. Cascading Style Sheets can also be used to create more dynamic effects such as tooltips, the pop-up text messages that appear when an HTML element is moused over.

Tooltips can be created with the HTML title attribute, but the resulting tooltip stays visible for only a few seconds and it can’t be formatted. Tooltips can also be created using JavaScript and CSS, but this requires advanced knowledge of JavaScript. In this article I demonstrate how to use CSS to create tooltips that appear when a Web page image is moused over.

The Technique

Move your mouse over the image below. The box that pops up was created using only Cascading Style Sheets.

The HTML code used to create this effect looks like this:

In the above HTML code the image is nested within a tag and an tag. Since we’re using the tag only for this effect and not a working hyperlink, the href attribute is set to the dummy value «#». The tag itself is critically important for reasons explained below. Note also that the tag is nested within the and tags. The text within the tag is the text that will appear in the actual tooltip.

The CSS code used to create this effect looks like this:

div.photo-container a text-decoration: none;
color: black;
cursor: default;
font-weight: normal;
>

div.photo-container a span visibility: hidden;
position: absolute;
left: 15em;
top: -2.3em;
background: #ffff6b;
width: 17em;
border: 1px solid #404040;
font-size: 0.8em;
padding: 0.3em;
cursor: default;
line-height: 1.4;
>

div.photo-container a:hover span visibility: visible;
>

In the above CSS code block there are 5 classes. The first class, div.photo-container, sets the definitions for the containing element. The second class, div.photo-container a, sets the definitions for the element contained in the element. Note that the text-decoration property has been set to none in this class. This is because we don’t want a blue border to appear around the image or the text itself to be underlined in blue. Moving on, the third class is div.photo-container a span and this sets the definitions for the element. As mentioned above, the element contains the text that appears in the tooltip. The important properties and values for this element are visibility: hidden, which keeps the element hidden, and position: absolute, which positions the element. The div.photo-container a:hover span class is the meat of the code for this effect. Note that the visibility property is set to visible — when the mouse moves over the image the code in this class kicks in and makes the otherwise hidden span visible, creating the tooltip. In this respect a:hover functions somewhat like a mouseover event in JavaScript. As long as the mouse remains over the image the tooltip will remain visible. The fifth and final class, div.photo-container img sets the dimensions of the image.

   .tooltip < position: relative; display: inline-block; border-bottom: 1px dotted black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; >.tooltip:hover .tooltiptext < visibility: visible; >.size_of_img 
Move the mouse over the text below:
 
grewon.pdf
 
Note that the position of the tooltip text isn't very good. Check More Position GO
  

 
Tooltip text
 
 
 
 

container < max-width:600px; margin:0 auto; min-height:450px; >div.click-to-top < display:inline-block; position:relative; max-width:160px; >div.click-to-top:hover < z-index:10; >div.click-to-top img < -webkit-transition: all 0.8s; moz-transition: all 0.8s; transition: all 0.8s; width:130px; >div.click-to-top img:hover

div.click-to-top span < display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #333; color: #fff; >div.click-to-top:hover span

/* `border-box`. ALL THE THINGS! */ html < box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >body < margin: 64px auto; text-align: center; font-size: 100%; max-width: 640px; width: 94%; >a:hover < text-decoration: none; >header, .tooltip, .tooltip p < margin: 4em 0; text-align: center; >/** * Tooltip Styles */ /* Add this attribute to the element that needs a tooltip */ [data-tooltip] < position: relative; z-index: 2; cursor: pointer; >/* Hide the tooltip content by default */ [data-tooltip]:before, [data-tooltip]:after < visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; >/* Position tooltip above the element */ [data-tooltip]:before < position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; >/* Triangle hack to make tooltip look like a speech bubble */ [data-tooltip]:after < position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; >/* Show tooltip content on hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after

 
I’m a button with a tooltip