Open eshchapov opened 12 years ago
Google style popovers.
.popover { -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2); background-color:#fff; border:1px solid; position:absolute; z-index:1201!important; width:255px; line-height:17px; border-color:#bbb #bbb #a8a8a8; padding:16px } .popover .arrow:before { border:9px solid } .popover .arrow:after { border:8px solid } .popover.top .arrow { bottom:0; right:50% } .popover.bottom .arrow { top:-9px; right:50% } .popover.right .arrow { left:-9px; top:50% } .popover.left .arrow { right:0; top:50% } .popover.top .arrow:before,.popover.bottom .arrow:before { left:-9px; border-color:#bbb transparent } .popover.top .arrow:before { border-bottom-width:0; border-color:#a8a8a8 transparent } .popover.top .arrow:after,.popover.bottom .arrow:after { left:-8px; border-color:#fff transparent } .popover.top .arrow:after { border-bottom-width:0 } .popover.bottom .arrow:before { border-top-width:0 } .popover.bottom .arrow:after { border-top-width:0; top:1px } .popover.right .arrow:before,.popover.left .arrow:before { top:-9px; border-color:transparent #bbb } .popover.right .arrow:after,.popover.left .arrow:after { top:-8px; border-color:transparent #fff } .popover.right .arrow:before { border-left-width:0 } .popover.right .arrow:after { border-left-width:0; left:1px } .popover.top { margin-top:-8px } .popover.right { margin-left:8px } .popover.bottom { margin-top:8px } .popover.left { margin-left:-8px } .popover .arrow,.popover .arrow:before,.popover .arrow:after { content:''; display:block; height:0; position:absolute; width:0 } .popover.left .arrow:before,.popover.left .arrow:after { border-right-width:0 }
And html markup
<div class="popover right"> <div class="popover-content"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </div> <div class="arrow"></div> </div>
Hope it will be cleaned and added in 0.1.1 ;)
Google style popovers.
And html markup
Hope it will be cleaned and added in 0.1.1 ;)