Я пытаюсь создать форму, в которой у меня есть подсказки для инструментов, которые ВСЕГДА показывают справа, чтобы помочь пользователям заполнить их формы. То, что я сделал, я назначил каждую часть в Divs, и я хочу получить подсказку для каждого из них.
<div title="This is where you fill your first name in.">
<p> First Name: <input type="text" name="firstName"/> </p>
</div>
<div title="Last Name Entry">
<p> Last Name: <input type="text" name="lastName"/> </p>
</div>
<div title="OK!">
<input type="submit" style="width: 10em; margin: auto 0"/>
</div>
Я нашел этот аккуратный веб-сайт, который легко помогает вам стилизовать CSS, и я использовал код, который я создал через него:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
любезно предоставлено:
Заранее спасибо!
Ну, я могу дать вам ответ на ваш вопрос из названия. Я всегда использую псевдо-элементы CSS3 и атрибут данных для выполнения этого без какого-либо кода jQuery.
Это CSS3:
[data-tip] { position:relative } [data-tip]:before { content: ''; display: none; border: 5px solid #000; border-top-color: #000; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; position: absolute; top: -7px; left: 10px; z-index: 8; font-size: 0; line-height: 0; width: 0; height: 0; } [data-tip]:after { display: none; content: attr(data-tip); position: absolute; top: -35px; left: 0px; padding: 0px 8px; background: #000; color: #fff; z-index: 9; font-size: 13px; height: 28px; line-height: 28px; white-space: nowrap; word-wrap: normal; } [data-tip]:hover:before, [data-tip]:hover:after { display: block; } .tip-below[data-tip]:after { top: 23px; left: 0px; } .tip-below[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #1a1a1a; border-left-color: transparent; top: 13px; left: 10px; }
И HTML будет b:
<a href="#" data-tip="Tooltip text here"> some text here </a>
Вместо резкости вы можете сделать правую сторону.
Здесь FIDDLE
В скрипте всплывающая подсказка работает в фокусе, но если вы удаляете непрозрачность, она всегда будет отображаться
<input type="text" name="firstName" placeholder="First Name"><span class="tooltip">Tooltip 1 content</span>
<input type="text" name="lastName" placeholder="Last Name"><span class="tooltip">Tooltip 2 content</span>
input {
float: left;
clear: left;
width: 200px;
margin: 0 0 12px;
padding: 5px;
border: 1px solid #ddd;
}
.tooltip {
position: relative;
float: left;
margin-left: 10px;
padding: 0 5px;
line-height: 26px;
color: #555;
opacity: 0;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
.tooltip:after, .tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(200,200,200,0);
border-right-color: #ddd;
border-width: 8px;
margin-top: -8px;
}
input:focus + .tooltip {
opacity: 1;
}