HTML CSS examples for CSS Widget:Hover
Create the pop up/hover box
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #talkbubble {<!--from w w w . j av a 2 s .c o m--> width:121px; height:81px; background:red; position:relative; margin-left:100px; padding:11px; -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px; } #talkbubble:before { content:""; position:absolute; right:100%; top:27px; width:0; height:0; border-top:14px solid Chartreuse; border-right:27px solid yellow; border-bottom:14px solid blue; } .alert { display:none; } span { display:line-block; position:absolute; left:11px; top:46px; } span:focus~.alert { display:block; } </style> </head> <body> <span tabindex="0">Lorem ip</span> <div class="alert"> <p id="talkbubble">Lorem ipsum dolor sit amet, co</p> </div> </body> </html>