search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

Idea: List Balloon #104

Closed Swiftkilla closed 5 years ago

Swiftkilla commented 6 years ago

DISCLAIMER: Not an issue... KUDOS: Nice job, I like a good CDN tooltip :+1:

Pretty simple idea in theory, please feel free to discard the idea if it's unncessarily complicated.

Add a balloon type that will render lists, perhaps using a seperator.

e.g. Instead of this: <a href='#'><li data-balloon-length="fit" data-balloon="test" data-balloon-pos="down">

have another like: <a href='#'><li data-balloon-length="fit" data-balloon="test" data-balloon-pos="list-down">

With that in the data-balloon="test1,test2,test3,or a longer sentence"

kazzkiq commented 5 years ago

You can already do that making use of &#10; code and data-balloon-break attribute:

<button aria-label="- Item 1&#10;- Item 2&#10;- Item 3&#10;- Item 4" data-balloon-pos="down" data-balloon-break>Hover me!</button>

Check this answer for details.