目的
浏览器自带的title属性无法很好的作为提示语,故使用
js重写tilte
样例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
/*修改提示框*/
#mytitle {
position: absolute;
color: #333333;
max- 300px;
font-size: 12px;
padding: 4px;
font-weight: bolder;
background-color: #fff5d8;
border: 1px solid #e0a385;
padding:6px 12px 4px 12px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
setTitle($('input[name="test"]'),'这是一个自定义标题');
})
function setTitle(dom,title){
var x = 10;
var y = 30;
dom.mouseover(function (e) {
newtitle = this.title;
this.title = '';
$('body').append('<div id="mytitle" >' + title + '</div>');
$('#mytitle').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y - 80 + 'px')
}).show();
}).mouseout(function () {
this.title = newtitle;
$('#mytitle').remove();
})
$("input").focus(function(){
$('#mytitle').remove();
});
}
</script>
</head>
<body>
<div style="margin-top: 200px;text-align: center;">
<input type='text' name='test' />
</div>
</body>
</html>