powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскака
8 сообщений из 8, страница 1 из 1
Подскака
    #38325449
Me_and_me_again
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
У тэгов есть свойство title, в которое можно вписать текст подсказки. Подсказка появляется при наведении курсора на элемент. Можно ли каким-либо образом отрегулировать время отображения этой подсказки? А то бывает текст в ней большой и юзер прочитать не успеет до скрытия подсказки.

ps: желательно кроссбраузерно)
...
Рейтинг: 0 / 0
Подскака
    #38325536
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Me_and_me_againМожно ли каким-либо образом отрегулировать время отображения этой подсказки?
Смотри настройки браузера... Если такое есть - то только там.
...
Рейтинг: 0 / 0
Подскака
    #38325544
Me_and_me_again
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
krvsaMe_and_me_againМожно ли каким-либо образом отрегулировать время отображения этой подсказки?
Смотри настройки браузера... Если такое есть - то только там.
печальная новость. это ж программно не сделать. придётся свой блочек на наведение писать(
...
Рейтинг: 0 / 0
Подскака
    #38326224
mhx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mhx
Гость
Возможно, такое подойдет либо натолкнет на мысли
http://sources.ru/jscript/jscript_link_popup_box.shtml
...
Рейтинг: 0 / 0
Подскака
    #38326234
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Me_and_me_again,

Свои подсказки делаются через стили: content before/after Теоретически через transform можно реализовать анимацию их появления, а значит и задержку.
...
Рейтинг: 0 / 0
Подскака
    #38326319
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Me_and_me_again,

Тынц!
...
Рейтинг: 0 / 0
Подскака
    #38327384
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSerge,

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

ТС, под плюсом код.



Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<!DOCTYPE html>
<html>
<head>
<style>

.tooltip {
	position: relative;
	
	/* just for fun */
	display:inline-block;
	background:lightgrey;
	color:black;
	text-decoration:none;
	padding: 3px 5px 3px 5px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	outline: 0;
}

.tooltip:before { /*tip top*/
	pointer-events: none;
	content: " ";
	position: absolute;
	left: 10px;
	top: 25px;
	width: 0;
	height: 0;
	background-color: hsla(40, 20%, 90%, .0);
	border: solid hsla(40, 20%, 90%, .0) 10px;
	border-top:0;
	transition: background-color 1s, color .5s, border-color 1s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}

.tooltip:after { /*body*/
	pointer-events: none;
	background-color: hsla(40, 20%, 90%, .0);
	position: absolute;
	padding: 0 10px;
	top: 35px;
	left: 0;
	width: 100px;
	content: attr(data-tooltip);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: hsla(40, 20%, 20%, .0);
	transition: background-color 1s, color .5s, border-color 1s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}

.tooltip:hover:before {
	border-bottom-color: hsla(40, 20%, 90%, .9);
}

.tooltip:hover:after{
	background-color: hsla(40, 20%, 90%, .9);
	color: hsla(40, 20%, 20%, .9);
}

</style>
</head>

<body>
<a href="#ref1" class="tooltip" data-tooltip="There is a way to show tooltip">One link</a>
<a href="#ref2" class="tooltip" data-tooltip="with CSS only">Another one</a>
<a href="#ref2" class="tooltip" data-tooltip="but it leaves some uncertainties.">Last stand</a>

</body>
</html>





И как оно внатуре http://jsfiddle.net/bCtLD/
...
Рейтинг: 0 / 0
Подскака
    #38327397
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Поскольку ответ не совсем релевантный объясню почему запостил. Обычно тултипы делают с применением opacity контейнера в тупой связке transition all... что сугубо ограничивает выразительные средства, хотя и несколько облегчает задачу. Если же применять альфу по свойствам то можно разнообразить один и то же шаблон просто меняя тайминг перехода свойств. Например текст в примере выше проявляется за 0.5 секунды, а все остальное барахло за
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскака
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]