kazzkiq / balloon.css

Simple tooltips made of pure CSS

Home Page:https://kazzkiq.github.io/balloon.css/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Idea: List Balloon

Swiftkilla opened this issue Β· comments

DISCLAIMER: Not an issue...
KUDOS: Nice job, I like a good CDN tooltip πŸ‘

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"

  • test1

  • test2

  • test3

  • or a longer sentence

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.