Turns out there is a way to capture the "title" attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual "title" attribute would eventually display.
Therefore, I made use of another CSS3 feature called "custom data attributes" and, rather than storing the title of the element in the "title" attribute, I used "data-title" instead.
Here is a quick example:
<!DOCTYPE html>
<head>
<style type="text/css">
.sprocket { position:relative;width:50px;height:50px;background-color:red; }
.sprocket:before { content:attr(data-title); display:none; }
.sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
.sprocket:hover{ z-index:10; position:absolute; }
</style>
</head>
<body>
<div class="sprocket" data-title="Fancy Title Text">
</body>
</html>
Click here for an ExampleShannon Norrell
