Отображение текста, когда мышь находится над текстовым полем ввода

У меня есть текстовое поле ввода, на котором я хотел бы отобразить некоторую текстовую область, когда мышь пользователя пройдет по ней, предоставив ему информацию о вводимом тексте. вот мой HTML код:Отображение текста, когда мышь находится над текстовым полем ввода

<html> 
<body> 
<style type="text/css"> 
.mouseover 
{ 



} 

</style> 
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span> 
<input id="mybox" type="text" /> 

</body> 
</html>

Что такое лучший CSS трюк, который поможет сделать это? Благодарим вас за помощь.

источник

2014-01-17 mounaim

CSS ': hover' вы пробовали? – micnic

Да micnic :) Я пробовал ответ, предоставленный @Midhum, но он не работает на IE8:/ – mounaim

Вы можете сделать все это с помощью CSS. Играйте с треугольниками CSS для всплывающей подсказки, но то, что вы в основном ищете, - это использовать псевдокласс класса :hover. Нет необходимости в Javascript.

.input { 
    position: relative; 
} 

.tooltip { 
    display: none; 
    padding: 10px; 
} 

.input:hover .tooltip { 
    background: blue; 
    border-radius: 3px; 
    bottom: -60px; 
    color: white; 
    display: inline; 
    height: 30px; 
    left: 0; 
    line-height: 30px; 
    position: absolute; 
} 

.input:hover .tooltip:before { 
    display: block; 
    content: ""; 
    position: absolute; 
    top: -5px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid blue; 
}

http://jsfiddle.net/v8xUL/1/

источник

2014-01-17 09:12:04 RichieAHB

Спасибо @richieahb, Это то, что я искал :) Но он не работает на IE8. – mounaim

Решает ли ваша проблема ваша проблема? http://stackoverflow.com/questions/5138481/ie-8-css-hover-over-input-element-issue – RichieAHB

Вы можете использовать Jquery Tooltip:

Jquery Tooltip

источник

2014-01-17 09:04:53

* simple css-based tooltip */ 
.tooltip { 
    background-color:#000; 
    border:1px solid #fff; 
    padding:10px 15px; 
    width:200px; 
    display:none; 
    color:#fff; 
    text-align:left; 
    font-size:12px; 

    /* outline radius for mozilla/firefox only */ 
    -moz-box-shadow:0 0 10px #000; 
    -webkit-box-shadow:0 0 10px #000; 
} 
// select all desired input fields and attach tooltips to them 
     $("#myform :input").tooltip({ 

     // place tooltip on the right edge 
     position: "center right", 

     // a little tweaking of the position 
     offset: [-2, 10], 

     // use the built-in fadeIn/fadeOut effect 
     effect: "fade", 

     // custom opacity setting 
     opacity: 0.7 

     });

получил по этой ссылке http://jquerytools.org/demos/tooltip/form.html

источник

2014-01-17 09:05:30

Попробуйте это свойство это жерех, но может работать для вашего случая

ErrorMessage = "Ваше сообщение";

источник

2014-01-17 09:28:09 pakitoUser3205849

Где я должен поместить этот атрибут @ pakitoUser3205849? – mounaim

Попробуйте в своем входном баллоне. Здесь под мой случай, который работает для меня: \t <жерех: TextBox ID = "Mybox" MaxLength = "4" \t \t \t \t \t \t \t \t \t \t \t \t \t <жерех: RegularExpressionValidator ID = "RegexTextBox" runat = "server" ControlToValidate = "Mybox" ErrorMessage = "поле для проверки" /> – pakitoUser3205849

Нет, это не работает :) – mounaim

Просто еще один способ сделать это ...

Filldle Demo

Для меня в IE8 OK DEMO

<input type="text"> 
<span>Some Text inside... </span> 




span { 
     background-color: rgba(0,102,255,.15); 
     border: 2px solid rgba(0,102,255,.5); 
     border-radius: 10px; 
     color: #000; 
     display: none; 
     padding: 10px; 
     position: relative; 
    } 

span:before { 
    content: ""; 
    border-style: solid; 
    border-width: 0 15px 15px 15px; 
    border-color: transparent transparent rgba(0,102,255,.5) transparent; 
    height: 0; 
    position: absolute; 
    top: -17px; 
    width: 0; 
} 

input { 
    display: block 
} 

input:hover + span { 
    display: inline-block; 
    margin: 10px 0 0 10px 
}

источник

2014-01-17 09:38:42 Sven

@ Sven. Приведенный выше пример дает мне всплывающую подсказку для всех текстовых полей. Как мы можем получить его только для определенного текстового поля. –

Используйте классы вместо html в качестве селекторов. – Sven

Отображение текста, когда мышь находится над текстовым полем ввода

ответ

Смежные вопросы