Wednesday, 27 April 2016

Creating a Custom Tooltip

Creating a Custom Tooltip using Htm and CSS

      ToolTip on the Top

To create a tooltip on the top of a content you need to write the below styles and Html.

table{
margin:10%
}
table tr td{
padding-right:20px;
}
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span.tips {
            position: absolute;
             width: 125px;
            max-width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 20px;
            line-height: 20px;
            text-align: center;
            visibility: hidden;
            border-radius: 4px;
            font-size: 12px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            margin-left: -45px !important;
        }

            a.tooltips span.tips:after {
                content: '';
                position: absolute;
                bottom: 100%;
                left: 55%;
                margin-left: -8px;
                width: 0;
                height: 0;
                top: 20px;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span.tips {
        visibility: visible;
        opacity: 0.8;
        top: -60px;
        left: 10%;
        margin-left: -76px;
        z-index: 999;
    }

Add the Html

<table>
<tr>
<td>
<a class="tooltips">
       <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="50" width="90">
  <span class="tips">Tooltip on Top</span>
</a>
</td>
</tr>
</table>

Now Run your Html Page:

           ToolTip on the Bottom

To create a tooltip on the bottom of a content you need to write the below styles and Html.

     span.tooltips {
        position: relative;
        display: inline;
    }

        span.tooltips span {
            position: absolute;
          width: 125px;
            color: #FFFFFF;
            background: #000000;
            height: 20px;
            line-height: 20px;
            text-align: center;
            visibility: hidden;
            border-radius: 4px;
            font-size: 12px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            margin-left: -45px !important;
            font-weight:normal !important;
        }

            span.tooltips span:after {
                content: '';
                position: absolute;
                bottom: 100%;
                left: 55%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-bottom: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    span:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        top: 25px;
        left: 18%;
        margin-left: -76px;
        z-index: 999;
    }

  Add the Html

<table>
<tr>
<td>
<span class="tooltips" style="font-size: 13px;">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="50" width="90">
  <span class="tips">Tooltip on Bottom</span>
 </span>
</td>
</tr>
</table>

Now Run your Html Page:



Click here to Download the Html File.


0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (9) Web Service (1) XMl (1)