Simple tooltips made of pure CSS

gravatar
CSS 2/3, Balloon.css
Snippet by Anon
723 0
HTML
<h2>Positioning</h2>
<button data-balloon="Whats up!" data-balloon-pos="up">Hover me! :up</button>
<button data-balloon="Whats up!" data-balloon-pos="left">Hover me! :left</button>
<button data-balloon="Whats up!" data-balloon-pos="right">Hover me! :right</button>
<button data-balloon="Whats up!" data-balloon-pos="down">Hover me! :down</button>

<button data-balloon="Whats up!" data-balloon-pos="up-left">Hover me! :up-left</button>
<button data-balloon="Whats up!" data-balloon-pos="up-right">Hover me! :up-right</button>
<button data-balloon="Whats up!" data-balloon-pos="down-left">Hover me! :down-left</button>
<button data-balloon="Whats up!" data-balloon-pos="down-right">Hover me! :down-right</button>

<h2>Length</h2>
<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me! :small</button>
<button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip. :medium</button>
<button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip :large</button>
<button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip :xlarge</button>
<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element :fit</button>


<h2>Showing tooltips programatically</h2>
<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button>

<h2>Glyphs and Icon Fonts</h2>
<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
<button class="font-awesome" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</button>
CSS
{ } JS

            
Preview