1

Как сделать подсказка на клике на инпут? Вот примерно как в контакте! вот ссылка http://piccy.info/view3/4855107/132d78c21ee2a33b87be62591d7742ab/

3 ответа 3

3

http://cssdeck.com/labs/tooltipscss3

3
  • 3
    из-за мелочи подключать целую библиотеку это не вариант! может кто-то ещё что-то подскажет?)))
    – amf1k
    Commented 15 июл. 2013 в 17:09
  • не подключайте этот bootstrap.. изучите и поймите суть самого CSS
    – stasQa
    Commented 16 июл. 2013 в 11:35
  • сорри, это тут чистое css3 канает!)))
    – amf1k
    Commented 16 июл. 2013 в 20:10
2

Мой CSS-вариант:

* {
  padding: 0;
  margin: 0;
}
p {
  padding: 0 10px;
}
input {
  border: 1px solid #ccc;
  margin: 5px 0;
  padding: 3px 5px;
}
input:focus {
  border-color: #fc0;
}
label {
  display: none;
  border: 1px solid #ccc;
  background: #f1f1f1;
  padding: 2px 5px;
  margin: 0 0 0 4px;
}
input:focus + label {
  display: inline-block;
}
<p>
  <input id="login" type="text" />
  <label for="login">Your login</label>
</p>
<p>
  <input id="name" type="text" />
  <label for="name">Enter your name</label>
</p>
<p>
  <input id="surname" type="text" />
  <label for="surname">Surname</label>
</p>

Ссылка на jsfiddle

2
  • Можешь объяснить, как работает input:focus + label {} ? Постоянно вижу и незнаю что это за "сложение селекторов". Работает ли на ipad, android?
    – ferrari
    Commented 16 июл. 2013 в 17:28
  • 1
    Input + label{} - Задает стиль для label, перед которой стоИт input. Использовать можно и в других случаях, например: <span></span><em></em> span + em {color: #f00;} - выделит красным цветом все <em>, которые идут сразу же после <span>
    – dekameron
    Commented 16 июл. 2013 в 19:50
0

предлагаю свою реализацию:

* {
    margin: 0px;
    padding: 0px;
}

body {
    margin: 20px;
}
.cb {
    clear: both;
}

input {
    float: left;
    height: 20px;
    margin-right: 10px;
}

.help {
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    font-family: sans-serif;
    background: #333;
    color: #fff;
    border-radius: 5px;
    padding: 0px 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s 0s;
}

label:hover > .help {
    visibility: visible;
    opacity: 1;
}
<label>
    <input type="text">
    <div class="help">Help to enter name</div>
</label>
<div class="cb"></div>


<label>
    <input type="text">
    <div class="help">Help to enter password</div>
</label>
<div class="cb"></div>

    

<label>
    <input type="text">
    <div class="help">Help to enter email</div>
</label>
<div class="cb"></div>

Ссылка на jsfiddle

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.