Is it possible to style certain text inside of a title attribute?

Question

Suppose I have a link <a href="#" title="Hello, World!">. I want to style parts of the title tooltip attribute. For example, I want to have the Hello part be bold. I'm not trying to style both Hello and World, just the Hello part.

I have tried putting HTML tags inside of the attribute, but they appear to have no effect (if I enter <a href="#" title="<b>Hello,</b> World!">, the title text prints out <b>Hello,</b> World!, which is not what I want. I have made a JSFiddle demo of what happens.

Is it possible to do this using pure CSS?

Also, I have seen this, but it's not what I wanted. It's close, however.

No. The title tooltip can't be modified or styled. – JJJ Feb 18 '13 at 07:31 — JJJ, Feb 18 '13 at 07:31

score 2 · Accepted Answer · answered Feb 18 '13 at 07:45

2

You can't put HTML in the attribute title, it's not a valid code but I beleive you can use hint.css library: http://kushagragour.in/lab/hint/. Completely css-based and easy-to-use:

<a href="http://somewhere/" class="hint  hint--bottom" data-hint="Hello" title="Hello world">Your link</a>

answered Feb 18 '13 at 07:45

Afshin Mehrabani

33,262
29
136
201

Hmm, looks interesting. Thanks! I'm going to try that. – Piccolo Feb 18 '13 at 07:48
@boj You're welcome. For styling, you could create a css class as well. – Afshin Mehrabani Feb 18 '13 at 07:50

score 1 · Answer 2 · answered Feb 18 '13 at 07:34

1

I think the only way for you to achieve what you want is to make a div with the style you want, hide it, and on hover - show it.

answered Feb 18 '13 at 07:34

ParPar

7,355
7
43
56

Or use [this](http://www.opentip.org/). However, I was wondering if it was possible in CSS. – Piccolo Feb 18 '13 at 07:36

Is it possible to style certain text inside of a title attribute?

2 Answers2