CSS Всплывающие подсказки. Уроки для начинающих. W3Schools на русском

Всплывающая картинка CSS

CSS код

.thumbnail{ 

position: relative; 

z-index: 0; 

.thumbnail:hover{ 

background-color: transparent; 

z-index: 50; 

.thumbnail span{ /*CSS for enlarged image*/ 

position: absolute; 

background-color: #3d3d3d; 

padding: 5px; 

left: -1000px; 

border: 1px solid white; 

visibility: hidden; 

color: green; 

text-decoration: none; 

border-radius: 4px 4px 4px 4px;

-moz-border-radius: 4px 4px 4px 4px;

-webkit-border-radius: 4px 4px 4px 4px;

.thumbnail span img{ /*CSS for enlarged image*/ 

border-width: 0; 

padding: 2px; 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 

visibility: visible; 

top: 0; 

left: 60px; /*position where enlarged image should offset horizontally */ 

}

Видео

Позиционирование всплывающих подсказок

В этом примере всплывающая подсказка находится справа (left:105%) от "наведенного" текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине элемента контейнера. Мы используем число 5, потому что текст всплывающей подсказки имеет верхний и нижний отступы 5px. Если вы увеличите его отступ, также увеличьте значение свойства top, чтобы оно оставалось посередине (если это то, что вам нужно). То же самое необходимо, если вы хотите, чтобы подсказка была расположена слева.

Подсказка справа

.tooltip .tooltiptext {  top: -5px;  left: 105%; }

Результат:

Наведите на меня Текст подсказки

Попробуйте сами »

Подсказка слева

.tooltip .tooltiptext {  top: -5px;  right: 105%; }

Результат:

Наведите на меня Текст подсказки

Попробуйте сами »

Если вы хотите, чтобы всплывающая подсказка появлялась сверху или снизу, см. примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это должно центрировать всплывающую подсказку выше / ниже текста, на который нужно навести текст. Устанавливается на половину ширины всплывающей подсказки (120/2 = 60).

Подсказка вверху

.tooltip .tooltiptext {  width: 120px;  bottom: 100%;  left: 50%;   margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */}

Результат:

Наведите на меня Текст подсказки

Попробуйте сами »

Подсказка внизу

.tooltip .tooltiptext {  width: 120px;  top: 100%;  left: 50%;   margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */}

Результат:

Наведите на меня Текст подсказки

Попробуйте сами »

HTML разметка

Атрибут aria-label вставляется в HTML разметку и используется, как метка для текста всплывающих подсказок. Пропишем в атрибуте текст, который будет находиться внутри всплывающей плашки.

<p>Tarwhine cow shark shortnose chimaera clingfish sleeper shark, trout-perch Alaska blackfish armored gurnard. Loosejaw wels catfish devil ray, dealfish neon tetra pencilsmelt spookfish glassfish southern Dolly Varden Siamese fighting fish; betta delta smelt Antarctic icefish. Lined sole cusk-eel coley midshipman dogteeth <a href="#" aria-label="This is extra information">tetra Moorish</a> idol ronquil halfmoon javelin. Arrowtooth eel triggerfish, sailfish red velvetfish red snapper speckled trout bass mosquitofish scissor-tail rasbora.</p>

Всплывающее окно при уходе с сайта

Здесь не все так однозначно. Дело в том, что мы не можем сделать так, чтобы при закрытии вкладки браузера всплывало созданное нами окно. Мы сможем показать только стандартный Алерт. делается это так:

Но можно сделать имитацию. То есть когда курсор будет выведен за пределы страницы в самый верх и мы можем предположить, что клиент собирается покинуть сайт — тогда и будем показывать окно с информацией.

Теги

Adblock
detector