Blog

You are currently viewing Creating beautiful tooltips with only CSS
Creating beautiful tooltips with only CSS

Creating beautiful tooltips with only CSS

Creating beautiful tooltips with only CSS

Hello, friend’s hope you are doing so today we are making very cool tooltips with only CSS.

Either you can download the source from the bottom file or follow the tutorial along with me.

Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.

Let’s start our tooltips with only CSS & this is one of the best tooltips with only CSS Also, make your tooltips with only CSS . So without wasting any time let’s jump into the source code.

We start our code with the tooltips with only CSS.

Creating beautiful tooltips with only CSS

THE HTML

<div class="tooltip-container">
 Hover Me !
<span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>

THE CSS

Lets talk about our styling part where put some twic effect for our tooltip its a very small abd simple tooltip project using css. With 

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v4/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
}

body {
    width:120px;
    margin: 150px auto;
    background: #D76655;
    font: 400 12px/14px 'Muli';
}

.tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.tooltip {
    opacity: 0;
    z-index: 99;
    color: #bbb;
    width: 190px;
    display: block;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: rgba(51,51,51,0.9);
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    right: -80px;
    bottom: 40px;
}

.tooltip:before,.tooltip:after {
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51,51,51,0.9);
    position: absolute;
    bottom: -10px;
    left: 43%;
}

.tooltip-container:hover .tooltip,a:hover .tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

This is the final version of the TOOLTIP if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.

Output

Creating beautiful tooltips with only CSS
Creating beautiful tooltips with only CSS

People are also reading:

Tags: ,

Leave a Reply