Im trying to change title style for all links however i just found how to do it for <a> links not for forms , <td> and images titles neighter. Can any one help me to get it using jquery .. this is the code that i have:
<!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>
$(document).ready(function() {
$('body').append('<div id="anchorTitle" class="anchorTitle"></div>');
$('a[title!=""]').each(function() {
var a = $(this);
a.hover(
function() {
showAnchorTitle(a, a.data('title'));
},
function() {
hideAnchorTitle();
}
)
.data('title', a.attr('title'))
.removeAttr('title');
});
});
function showAnchorTitle(element, text) {
var offset = element.offset();
$('#anchorTitle')
.css({
'top' : (offset.top + element.outerHeight() + 4) + 'px',
'left' : offset.left + 'px'
})
.html(text)
.show();
}
function hideAnchorTitle() {
$('#anchorTitle').hide();
}
</script>
<style>
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
/* title style
*/
.anchorTitle {
/* border radius */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-moz-box-shadow: 2px 2px 3px #e6e6e6;
-webkit-box-shadow: 2px 2px 3px #e6e6e6;
box-shadow: 2px 2px 3px #e6e6e6;
/* other settings */
background-color: #fff;
border: solid 3px #d6d6d6;
color: #333;
display: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
line-height: 1.3;
max-width: 200px;
padding: 5px 7px;
position: absolute;
}
* html #anchorTitle {
/* IE6 does not support max-width, so set a specific width instead */
width: 200px;
}
</style>
</head>
<body>
<p>
<a href="#" title="The title will appear in an box when the mouse is over the link">Hover over me</a>
</p>
<div>
<input type="text" title="The title will appear in an box when the mouse is over the link" name="styleSwitcher" placeholder="Hover over me" /><p></p><p></p>
<dt title="The title will appear in an box when the mouse is over the link">Hover over me </dt>
</div>
</body>
</html>
