Let’s say we have:
<a id="link" href="#" title="i am the title">link</a>
Is there a way to use CSS to uppercase the "i am the title" text that will be shown on mouse hover by default?
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
You can't style an actual title attribute How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
The text-transform property controls the capitalization of text.
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
Not that I'm aware of.
You can select an element by its attribute(s), but not select an attribute itself.
A little bit of JavaScript can do it, however...
var elem = document.getElementById('link');
elem.title = elem.title.toUpperCase();
jsFiddle.
No - title like tooltips are browser dependant, CSS can't change them.
But here's a link that shows how you can make a fake tooltip look like you want with CSS only: How to change the style of Title attribute inside the anchor tag?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With