EmberJS和CSS：空标题的跨度标题工具提示

Question

I am using

<span title="Tooltip Text">Hover here</span>

to create a simple tooltip with EmberJS's handlebar templates.

The text within the span element is dynamic and keeps changing.

For example,

<span title="Tooltip Text"></span>

appears sometimes as a result.

But, it isn't rendering when the innerText is empty, and the tooltip doesn't appear when the innertext is empty. My requirement is to create a tooltip even if there is no inner text in the span element.

Is it possible?

Answer 1

Well, it seems unlikely that you would want a tooltip to show while nothing is in it, and that's probably why the tooltip doesn't show at all by default when it has nothing.

Considering you want it to show regardless, have you tried defaulting it to a ' ' (space)?

That might do it.

Answer 2

You could try the "Braille Pattern Blank" , which is an invisible, non-whitespace character that has worked for me:

 div { background-color:#efefef; } 

 <div title="hey">⠀</div><!-- “⠀” (U+2800) -->