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

Line break #100

Open d-bo opened 8 years ago

d-bo commented 8 years ago

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

vsxed commented 8 years ago

You can use this trick: http://stackoverflow.com/a/16452853

lavenpillay commented 8 years ago

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;

chinchang commented 8 years ago

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.

bjorntrondsen commented 8 years ago

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

nakashu commented 8 years ago

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;
}
chrisamow commented 7 years ago

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.

roipoussiere commented 3 years ago

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

sd8514530 commented 2 years ago

Try this &#10;

chinchang commented 2 years ago

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

Will add! nice suggestion!