Чистое выделение контекста CSS

Question

У меня есть несколько проблем здесь - я почти на месте, но теперь полностью застрял и надеюсь, что некоторые из вас, гуру CSS / HTML, могут предложить некоторую помощь.

Я пытаюсь сделать «выделение контекста на основе чистого CSS-кода с помощью всплывающей подсказки» - я в значительной степени собрал большую его часть, кроме всплывающей подсказки (смеется!). Я также хотел, чтобы всплывающая подсказка «зависала» при наведении мыши на поле.

В настоящее время в Safari также кажется, что «выделение» (желтая рамка) в браузере появляется вокруг всего выделения ...

Если кто-то может помочь с этими вопросами - люблю тебя долго!

#fields {
  padding-left:50px;
}

#example {
  float: left;
  width:500px;
  padding-right:40px;
}
#example label {
  display: block;
  float:left;
}
#example dt {
  float: left; 
  width: 50px; 
  clear: both; 
  padding-left: 5px; 
  z-index: 1; 
  position: relative;
  vertical-align: middle;
  line-height: 2em;
}
#example .tooltip {
  float:right;
  width:200px;
  margin-top:5px;
  visibility:hidden;
}
#example dd {
  width: 200px;
  float:left;
}
#example input[type=text], #example textarea {
  margin: 5px 5px 5px 0;
  width: 196px;
  border:1px solid #CCC;
}
#example input[type=text]:focus, #example textarea:focus, #example .tooltip:focus {
  border: #E9E9E9 solid ; 
  border-radius: 1px;
  border-width: 5px 200px 5px 100px; 
  left: -100px;
  margin: 2px 2px 2px 0;
  position: relative; 
  z-index: 0;
  float:left;
}

<div id="fields">
  <form id="example" action="" method=""> 
    <dt><label for="name">Name</label></dt> 
    <dd><input id="name" name="name" type="text" /></dd> 
    <div class="tooltip">some special tooltip</div>
    <dt><label for="email">Email</label></dt> 
    <dd><input id="email" name="email" type="text" /></dd>
    <div class="tooltip">some special tooltip</div>
    <dt><label for="message">Message</label></dt> 
    <dd><textarea id="message" name="message" rows="5" cols=""></textarea></dd>
  </form> 
</div>

Answer 1

Может помочь с границей:

.noselect {
-moz-user-select: none; /* mozilla */
-khtml-user-select: none; /* safari */
-o-user-select: none; /* opera */
cursor: pointer;
}

Удаляет визуальные признаки выделения текста (в поддерживаемых браузерах).

Answer 2

Re часть всплывающей подсказки вашего q:

Для кросс-браузерных всплывающих подсказок со всеми дополнениями я предлагаю http://developer.yahoo.com/yui/container/tooltip/

Larry

пс. Вы уверены, что хотите, чтобы метатег выбрал набор символов 8859-1? (Вместо UTF-8.)