Add Html Tag in Hint attribute

chinchang / hint.css

A CSS only tooltip library for your lovely websites.

https://kushagra.dev/lab/hint/

MIT License

8.42k stars 701 forks source link

Add Html Tag in Hint attribute #108

Closed Amit1150 closed 8 years ago

Amit1150 commented 8 years ago

I have added Html tag in data-hint attribute. But In tooltip It shows html tag too.

I have also set data-html="true". But It's not working.

See here Fiddle linjk

chinchang commented 8 years ago

Hint.css doesn't support HTML inside the tooltips.

et commented 8 years ago

@chinchang - Being able to represent HTML entities would be nice for usage with FontAwesome. e.g. I want to display an exclamation-circle before the text in the data attribute.

chinchang commented 8 years ago

@et Its a limitation of pseudo element's content property (which hint.css uses) that it doesn't support HTML inside it yet.

et commented 8 years ago

Yeah it's a bummer that we don't have multiple content properties (apparently this was suggested for CSS3 but knocked down).

I think it would be required to have some kind of multiple block elements. What are your thoughts about the following markup?

<span class="hint--bottom" data-hint="foo">
  <span class="hint--before"><i class="fa fa-exclamation-circle"></i></span>
  Hover over me
</span>

chinchang commented 8 years ago

whats the intended result with the mentioned markup?

et commented 8 years ago

@chinchang - roughly this: