добрый вечер,как можно сделать в inpute типы подсказке нельзя вводить цифры на js,ajax,jquery
то что я написала можете не смотрит,это просто добавила
//
<script type="text/javascript">
$(function () {
$('.real-show-hint').on("click", function(e){
e = e || window.event;
e.preventDefault();
var ypos = $(this).offset().top+24;
var xpos = $(this).offset().left;
var RealHint = $(this).data('hint');
$(RealHint).css('top',ypos);
$(RealHint).css('left',xpos);
$(RealHint).toggle('fast');
return;
});
$('.prm-cross').on('click', function(){
$(this).parent().hide('fast');
return false;
});
document.onclick = function(e){
if ($(e.target).hasClass('real-hint')==false)
$('.real-hint').hide('fast');
return;
}
});
</script>
<style type="text/css">
.real-hint {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 10px;
display: none;
padding: 5px 10px;
position: absolute;
width: 250px;
z-index: 99;
}
.real-hint .hint-caption {
font-weight: bold;
text-transform: uppercase;
}
.real-hint .prm-cross {
background: url("/images/cross.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
cursor: pointer;
float: right;
height: 16px;
margin-top: 3px;
padding-left: 15px;
right: 10px;
width: 16px;
}
.real-show-hint {
cursor: pointer;
border-bottom: dashed 1px;
color: #8c0000;
}
</style>
<div id="real-hint-1" class="real-hint">
<div class="prm-cross"></div>
<span class="hint-caption">Подсказка 1.</span><br/>
Вы нажали на первую ссылку
</div>
<div id="real-hint-2" class="real-hint">
<div class="prm-cross"></div>
<span class="hint-caption">Подсказка 2.</span><br/>
Вы нажали на вторую ссылку
</div>
<span class="real-show-hint" data-hint="#real-hint-1" >Ссылка на подсказку 1</span>
<span class="real-show-hint" data-hint="#real-hint-2" >Ссылка на подсказку 2</span>
**
<div id="tooltip"></div>
#tooltip {
z-index: 9999;
position: absolute;
display: none;
top:0px;
left:0px;
width: 342px;
background-color: #fff;
padding: 5px 10px 5px 10px;
color: #000;
border: 1px solid #888;
border-radius: 5px;
box-shadow: 0 1px 2px #555;
box-sizing: ;
}
<p><span data-tooltip="Подсказка номер 1">Подсказка 1</span> | <span data-tooltip="Подсказка номер 2">Подсказка 2</span></p>
$(function(){
$("[data-tooltip]").mousemove(function (eventObject) {
$data_tooltip = $(this).attr("data-tooltip");
$("#tooltip").text($data_tooltip)
.css({
"top" : eventObject.pageY + 5,
"left" : eventObject.pageX + 5
})
.show();
}).mouseout(function () {
$("#tooltip").hide()
.text("")
.css({
"top" : 0,
"left" : 0
});
});
})
