.info{
width: 41px;
height: 41px;
background: #b9b9ba;
border-radius: 10px;
position: relative;
opacity: 0.5;
border: 1px solid #fff;
}
.info:hover .info-tooltip{
opacity: 1;
}
.info-tooltip{
opacity: 0;
position: absolute; top: 50%; left: 100%;
margin-left: 25px;
text-align: center;
width: 200px;
padding: 10px;
background: #2E2E2E;
color: #fff;
border: 2px solid #F2782A;
border-radius: 10px;
transform: translateY(-50%);
transition: .5s;
}
.info-tooltip:before,
.info-tooltip:after{
content: '';
position: absolute; top: 50%; right: 100%;
width: 0;
height: 0;
border-style: solid;
}
.info-tooltip:before{
margin-top: -8px;
border-width: 8px 20px 8px 0;
border-color: transparent #2E2E2E transparent transparent;
z-index: 1;
}
.info-tooltip:after{
margin-top: -10px;
border-width: 10px 24px 10px 0;
border-color: transparent #F2782A transparent transparent;
}
<div class="info">
<div class='info-tooltip'>Text tooltip tooltip tooltip tooltip tooltip tooltip</div>
</div>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.