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

Кто может сверстать tooltip?

Метки: [без меток]
2008-08-01 14:37:47 [обр] Александр Клепиков(0/1)[досье]

http://img45.imageshack.us/img45/9086/arrowqk9.png

как реализовать такое? намекните, попробую сам сделать, а если еще и код покажете - буду премного благодарен

спустя 57 секунд [обр] Александр Клепиков(0/1)[досье]
конечно, забыл добавить, что это все должно тянуться во все стороны
спустя 1 час 10 минут [обр] Thirteensmay(3/157)[досье]

А чего тут намекать, ну делаете обычный скелет, хоть дивами хоть таблицей, вот например схематично:

<table border=1 width='50%' height='30%'>
 <tr>
  <td width='10px' height='10px'>/</td>
  <td height='10px' align='center'>----------</td>
  <td width='10px' height='10px'>\</td>
 </tr>
 <tr>
  <td width='10px'><</td>
  <td>Контент</td>
  <td width='10px'>|<br>|<br>|</td>
 </tr>
 <tr>
  <td width='10px' height='10px'>\</td>
  <td height='10px' align='center'>----------</td>
  <td width='10px' height='10px'>/</td>
 </tr>
</table>

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

спустя 1 день 9 часов [обр] Fenrir(0/3)[досье]
Эту картинку можно потянуть только по горизонтали. У неё тень от стрелочки заходит на нижнее скругление. Можно сделать так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
   <title>Tooltip</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .tooltip {
         float: left;
         background: #dbe0c4 url(tooltip.gif) 0 -42px repeat-x;
         font-size: .5em;
      }
      .tooltip .container {
         float: left;
         background: url(tooltip.gif) no-repeat;
      }
      .tooltip .content {
         float: left;
         height: 32px;
         overflow: hidden;
         padding: 1px 11px 9px 22px;
         background: url(tooltip.gif) 100% -84px no-repeat;
         vertical-align: middle;
         line-height: 32px;
      }
   </style>
</head>
<body>
   <div class="tooltip">
      <div class="container">
         <div class="content">Tooltip</div>
      </div>
   </div>
</body>
</html>
спустя 1 день 9 часов [обр] Александр Клепиков(0/1)[досье]
Fenrir[досье], вот ваше решение очень мне нравится, только проблема в том, что это точно должно тянуться и по вертикали :(
спустя 17 дней [обр] Fenrir(0/3)[досье]
А где должен быть "носик" при растягивании по вертикали? И без хорошего исходника эту картинку попросту не разрезать для такого случая.
Powered by POEM™ Engine Copyright © 2002-2005