Xpoint
   [напомнить пароль]

Элегантное решение всплывающей подсказки (аналог title)

2006-04-04 15:05:06 [обр] Многоуважаемый Василий Сергеевич [досье]

http://cssing.org.ua/examples/csstooltip/index1.html

Хоть и всплывающий слой нельзя пока контролировать влево или вправо (не додумался), но плюсы очевидны.
Не нужно юзать JS, зависеть от него и что самое главное, подсказка находится непосредственно в теле документа.

Я пошёл дальше, немного усовершенствовав этот подход, а именно:

...текст текст текст <a class="tt" href="#">Якорь ссылки<span class="invisible"> (</span><span class="title">Вспывающая подсказка</span><span class="invisible">)</span></a> текст текст текст...

и в CSS:

span.invisible{
display:none;
}

и

a.tt:hover span

заменил на

a.tt:hover span.title

Тем самым, в случае просмотра страницы через агрегаторы, не поддерживающие CSS, текст отобразиться так:

...текст текст текст Якорь ссылки (Вспывающая подсказка) текст текст текст...

вместо

...текст текст текст Якорь ссылкиВспывающая подсказка текст текст текст...

как это было бы в примере.

Удивило меня в это примере то, что если убрать из блока

a.tt:hover {
background-color:transparent;
text-decoration:none;
}

определение background-color, то в IE это всё работать не будет. Шаманство какое-то.. Хрен так догадаешся до такого хака. Почему так, никто не знает?

Ну и основной вопрос - каким способом можно этот пример заставить менять положение всплывающего слоя, в случае, если он выходит за область видимости страницы? Без JS!

спустя 3 часа 22 минуты [обр] Роман Чемисов [досье]
Василий М.[досье]
Вот почему (баг IE):
One IE/Win bug that takes a little planning to solve will happen when the display on the span gets changed while hovering the link, as we are doing here. IE/Win refuses to make this display change, unless at least one among a group of particular CSS properties on the link are changed at the same time. We don't know why, and neither does anyone else.
Changes to background, or certain of the text-related properties will "activate" the display change in IE/Win. In our support HTML test file we simply applied {font-size: 100%;}, which does the trick very nicely. Another very slick fix is to us apply background:; to the links on hover. Even with no actual value applied as a background, IE/Win seems to be happy with it and performs the popup as desired. Of course if you are causing a real background change on hover then that will do fine by itself.
Clearly it's not that IE/Win needs one of these properties to actually change on hover. No, what it wants is just to see background or font-size or one of the other properties that affect this bug, appearing within the link hover rule. The value applied to the property is apparently unimportant, and can even be left out!
  1. е. это не обязательно background-color
спустя 1 час 2 минуты [обр] Андрей Гора [досье]
Красивое решение
спустя 4 дня [обр] Андрей Гора [досье]
Наблюдал ли кто, в каких браузерах/платформах решение НЕ работает?
спустя 17 часов [обр] Многоуважаемый Василий Сергеевич [досье]
В опере кривость какая-то...
спустя 33 минуты [обр] Алексей В. Иванов [досье]
Должно быть всё нормально для указания position: relative для <a>. Идея создания такие тултипов довольно старая.
спустя 41 минуту [обр] Многоуважаемый Василий Сергеевич [досье]

Да, я ошибся.

Проблема например с этим в Опере:

<style>
div#text{
float:left;
position:absolute;
top:0;
left:270px;
padding:0.8em;
padding-left:0.5em;
}
</style>
<div id="text">...текст текст текст <a class="tt" href="#">Якорь ссылки<span class="invisible"> (</span><span class="title">Вспывающая подсказка</span><span class="invisible">)</span></a> текст текст текст...</div>

Как побороть - пока нинаю.

Powered by POEM™ Engine Copyright © 2002-2005