|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.popover__title { cursor: pointer; } .popover__wrapper { position: relative; display: inline-block; } .popover__content { opacity: 0; visibility: hidden; position: absolute; left: -100px; top: 105px; right: -100px; transform: translate(0,10px); background-color: white; padding: 15px; border: 1px solid #e8e7e7; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.16); width: auto; } .popover__content:before { position: absolute; z-index: -1; content: ''; right: calc(50% - 10px); top: -10px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #e8e7e7 transparent; transition-duration: 0.3s; transition-property: transform; } .popover__wrapper:hover .popover__content { z-index: 10; opacity: 1; visibility: visible; transform: translate(0,-20px); transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97); } .popover__message { text-align: center; } |
|
1 2 3 4 5 6 7 8 |
<div class="popover__wrapper"> <div class="popover__title"> TITLE </div> <div class="push popover__content"> BODY </div> </div> |