Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom Tooltip using Html and CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 185
    Comment on it

    Tooltip:

    A tooltip is generally used to indicate hints (extra information)  about something when the user moves the mouse pointer over an element.

    We can use either bootstrap tooltip plugin or we can create our own tooltip using html and css easily.

    Custom Tooltip Code:

    Html:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Custom Tooltip</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    <body style="text-align:center;">
    <div class="container">
    	<h2>Custom Tooltip:</h2>
    
    	<a class="custom-tooltip">Hover over me to see tooltip
    	  <span class="tooltipbar">Custom Tooltip </span>
    	</a>
    </div>
    </body>
    </html>

    I used  container element <a> and include the "custom-tooltip" class to it. At the point when the user moves mouse over this <a>, it will show the tooltip content. And the tooltip content is placed inside span element  with class="tooltipbar".

    CSS:

    .container{border:3px solid grey;max-width:500px;margin:0 auto;width:100%;padding:20px 0px;background:#D9DDE2;}
    .container>h2,p{padding-bottom:10px;text-align: center;}
    .custom-tooltip {
        position: relative;
        display: inline-block;
        
    }
    
    .custom-tooltip .tooltipbar {
        visibility: hidden;
        width: 170px;
        background-color: #2D7581;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 14px 0px;
        position: absolute;
        z-index: 1;
        bottom: 120%;
        left:50%;
        margin-left: -60px;
    }
    
    
    .custom-tooltip:hover .tooltipbar {
        visibility: visible;
    }
    .custom-tooltip .tooltipbar::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        right: 15%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #2D7581 transparent transparent transparent;
    }

    The tooltipbar class holds the tooltip text. It is hidden by default, and will be visible when user will move mouse over (hover) <a class="custom-tooltip"> tag .

    You can check the live working  from this link  https://jsfiddle.net/4bbs2863/9/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: