Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскака / 8 сообщений из 8, страница 1 из 1
09.07.2013, 13:26
    #38325449
Me_and_me_again
Me_and_me_again
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскака
У тэгов есть свойство title, в которое можно вписать текст подсказки. Подсказка появляется при наведении курсора на элемент. Можно ли каким-либо образом отрегулировать время отображения этой подсказки? А то бывает текст в ней большой и юзер прочитать не успеет до скрытия подсказки.

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

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

Тынц!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.07.2013, 21:09
    #38327384
deblogger
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
| Ответить | Цитировать | Написать  
10.07.2013, 21:34
    #38327397
deblogger
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскака
Поскольку ответ не совсем релевантный объясню почему запостил. Обычно тултипы делают с применением opacity контейнера в тупой связке transition all... что сугубо ограничивает выразительные средства, хотя и несколько облегчает задачу. Если же применять альфу по свойствам то можно разнообразить один и то же шаблон просто меняя тайминг перехода свойств. Например текст в примере выше проявляется за 0.5 секунды, а все остальное барахло за
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскака / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 494ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448144]:
 0ms
get settings:
 10ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 170ms
get topic data:
 11ms
get forum data:
 4ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 235ms
total:  494ms
x
x
Закрыть


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