JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="container">
    
    <div id="dot"></div>
    <div id="tip">Hey there</div>
    
</div>

CSS

#container {
  position: relative;
  height: 200px;
  width: 200px;
  top: 40%;
  left: 40%;
    
  -webkit-perspective: 200; 
}

#dot {
    background: -webkit-linear-gradient(top, #fff, #eee);
    border: 1px solid #009bf4;
    position: absolute;
    top: 40%;
    left: 50%;
    height: 12px;
    width: 12px;
    
    
    border-radius: 20px;
    box-shadow: 0 1px rgba(0,0,0,.1);
    
    -webkit-transition: all .2s ease-in-out;
}

#dot:hover {
    background: #009bf4;
}

#tip {
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 12px;
    font-family: helvetica neue;
    font-weight: 100;
    letter-spacing: 1px;
    padding: 4px 10px;
    position: absolute;
    top: 100px;
    left: 10px;
    
    
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: right;
    -webkit-transform: translateZ(-2000px) rotateY(80deg);
    /*-webkit-transition: all .3s ease-in-out;*/
}

#dot:hover + #tip {
    -webkit-animation: wee 2s ease-in-out;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes wee {
    from { -webkit-transform: translateZ(-2000px) rotateY(80deg); }
    50% { -webkit-transform: translateZ(0) rotateY(80deg); }
    to { -webkit-transform: rotateX(0deg) rotateY(0deg); }
}