Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can CSS uppercase the text shown for the title atribute?

Tags:

css

uppercase

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?

like image 275
Toni Michel Caubet Avatar asked Jan 09 '12 12:01

Toni Michel Caubet


People also ask

Can CSS text be capitalized?

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.

Can I style the title attribute?

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.

Which attribute controls the capitalization of text?

The text-transform property controls the capitalization of text.

What is the content of the title attribute?

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).


2 Answers

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.

like image 185
alex Avatar answered Sep 19 '22 17:09

alex


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?

like image 32
K. Bob Avatar answered Sep 17 '22 17:09

K. Bob