chinchang / hint.css

A CSS only tooltip library for your lovely websites.

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Line break

d-bo opened this issue · comments

Hello !
Cannot use <br> or a \r\n line breaks.
Thank you.

Thanks vsxed !
For anyone else coming along, this means that you just have to add this to your hint.css :

[data-hint]:after {
  content: attr(data-hint);
  white-space: pre;
}

and use this entity for linebreaks :
&#xa;

FYI, starting v2.2.0, there are 3 size variations available: hint--small, hint--medium & hint--large. This should help make the situation better where long texts break out instead of spanning across multiple lines.

For others who're struggling witht his:
Im using v2.3.1 and had to use this CSS to make the line breaks work:

[class*=hint--][aria-label]:after {
  white-space: pre;
}

Neat plugin BTW :)

If you want to also auto wrap on long lines you should use pre-line instead
So you content won`t run off the container

[class*=hint--][aria-label]:after {
  white-space: pre-line;
}

Awesome job guys - working in 2.4.0

To save time for others in case it isn't clear, the solution, evolved down to the nakashu jul25 post is for embedded '\n' to work, not the '&#xa;' in the lavenpillay post.

Any chance to have this CSS modification included in hint.css?

Try this &#10;

Any chance to have this CSS modification included in hint.css?

Will add! nice suggestion!