HTML всплывающий текст при наведении / нажатии на текст

@Oxik · Регистрация: 15.05.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Нужно сделать так, что бы при наведении или нажатии на текст всплывал другой текст, на подобии подсказки.
Как это сделать?

Добавлено через 50 секунд
При нажатии на текст ниже появлялся другой. Как бы скрытый текст

@cyb0rg_01 · 19.09.2015, 15:25

HTML5

<!DOCTYPE HTML>
<html>
 <head>
  <title></title>
  <meta charset="utf-8">
 </head>
 <body> 
  <p><abbr title="подсказка">текст</abbr></p>
</body> 
</html>

@ns16 · 19.09.2015, 16:15

Сообщение от Oxik

При нажатии на текст ниже появлялся другой. Как бы скрытый текст

Если нужно, чтобы подсказка появлялась именно по клику, то можно сделать так:

HTML5

1
2

<input type="checkbox" id="text">
<label for="text" data-title="Lorem ipsum dolor sit amet.">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iure soluta odit inventore, quae error nostrum, dolore laborum voluptatum id!</label>

CSS

input[type='checkbox'] {
    display: none;
}
label {
    position: relative;
    display: block;
    width: 250px;
    border: 1px solid black;
    padding: 8px;
}
input[type='checkbox']:checked + label::after { 
    content: attr(data-title);
    position: absolute;
    left: 75%;
    top: 75%;
    z-index: 1;
    width: 100px;
    background-color: rgba(255, 250, 205, 0.9);
    border: 1px solid orange;
    padding: 5px;
}

Демонстрация

@Oxik 3 / 3 / 5 Регистрация: 15.05.2015 Сообщений: 265
		1
	HTML всплывающий текст при наведении / нажатии на текст 19.09.2015, 15:05. Показов 17917. Ответов 2 Метки нет (Все метки) Здравствуйте! Нужно сделать так, что бы при наведении или нажатии на текст всплывал другой текст, на подобии подсказки. Как это сделать? Добавлено через 50 секунд При нажатии на текст ниже появлялся другой. Как бы скрытый текст 0

	19.09.2015, 16:15

HTML всплывающий текст при наведении / нажатии на текст

Решение