Title Attribute Style
Title Attribute Styling using jquery and css:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Title Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="/path/to/your/javascript.js"></script>
<link rel="stylesheet" href="/path/to/your/style.css" type="text/css" />
<style>
#anchorTitle {
border-radius: 3px;
background-color: #000;
border: solid 3px #d6d6d6;
color: #fff;
display: none;
font-size: 11px;
line-height: 1.3;
max-width: 200px;
padding: 5px 7px;
position: absolute;
}
</style>
<script>
$(document).ready(function() {
$('body').append('<div id="anchorTitle"></div>');
$('a[title!=""]').each(function() {
var a = $(this);
a.data('title', a.attr('title'))
.removeAttr('title')
.hover(
function() { showAnchorTitle(a, a.data('title')); },
function() { hideAnchorTitle(); }
);
});
});
function showAnchorTitle(element, text) {
var offset = element.offset();
$('#anchorTitle')
.css({
'top' : (offset.top + element.outerHeight() + 4) + 'px',
'left' : offset.left + 'px'
})
.html(text)
.show();
}
</script>
</head>
<body>
<p>
<a href="#" title="The title will appear in an box when the mouse is over the link">Hover over me</a>
- <a href="#" title="This one has a shorter title">Me too!</a>
</p>
</body>
</html>
Comments
Post a Comment