How to hide browser tooltip for links
Hi all I try to make my own tooltip script which follow my mouse with jQuery. Everything is okey but when I hover on link and wait few seconds browser use title for own tooltip. How I can stop this?!
I look for solution without removing of title ta开发者_Python百科g.
My code:
<html>
<head>
<title>Tooltip</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").mousemove("mouseover", function(e) {
var x = e.clientX;
var y = e.clientY-30;
var text = $(this).attr("title");
var i = 0;
for(i=0;i<1;i++) {
if(i=0) {
$("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
} else {
$("div.tooltip").remove();
$("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
}
}
});
$("a").mouseout(function() {
$("div.tooltip").remove();
});
});
</script>
<style>
body {
top: 0px;
left: 0px;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
div.tooltip {
background-color: #123534;
position: fixed;
z-index: 2;
padding: 5px;
heigth: 30px;
}
div.menu {
background-color: #666666;
margin-left: 100px;
margin-top: 100px;
position: fixed;
width: auto;
z-index: 1;
}
ul {
margin: 0;
padding: 5px;
list-style-type: none;
}
li {
display: inline;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="#" title="test" >Link</a>
</li>
<li>
<a href="#" title="asd" >Link</a>
</li>
<li>
<a href="#" title="123" >Link</a>
</li>
</ul>
</div>
</body>
</html>
And If anyone knows how to optimize my script I'll be very thankful ;]
It's very simple. You just need to place your tooltip data in another attribute. I use the html5 spec and do "data-tooltip".
HTML:
<a href="#" data-tooltip="my link tooltip content">My Link</a>
JS:
var text = $(this).data("tooltip");
-- OR --
If, for whatever reason you can't edit the markup, you could do it programatically. You would have to do it before the mouseover on document.ready like:
$(document).ready(function() {
$("a").each(function() {
var $this = $(this);
$this
.data("tooltip", $this.attr("title"))
.removeAttr("title");
});
});
Then, in your mousemove, as I mentioned above, you would pull it with:
var text = $(this).data("tooltip");
In your mouseover event, you could .attr('title', '') to remove the title..
and then in your mouseout event, you could .attr('title', text) since you saved the title earlier on.
$("a.the_link").hover(
function () {
$(this).data('title', $(this).attr('title'));
$(this).removeAttr('title');
},
function () {
$(this).attr('title', $(this).data('title'));
});
This is an idea I've seen, I din't thought about this because I didn't need it, but when I saw it I started using it. It removes the link on hover, but it returns it after mouse leaves the link. Works nicely.
加载中,请稍侯......
精彩评论