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.

Continue Reading →

Whats New in CSS3

CSS3 Features:

There are several new functionalities have been provided through CSS3. Functions such like opacity, Text-overflow, media queries and box shadows are some of the much attractive introductions.

1- With CSS3 you’ll be able to add not one, not four, but eight background images to a single element.

2- CSS3 is also addingborder-radius that may eliminate the need for images to create rounded corners in most cases.
Example: <div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" > 

3-  in CSS3 you Can Set Border-image Property. Border-image, allows an image to be used as the border of an element.

4- you can set text-shadow in CSS3 by using text-shadow: 2px 2px 2px #000; property.

5- in CSS3 you can set Transparency & Opacity of a element.
  example: <img src="opacity.png" style="margin: 10px; opacity:0.25; width:179px; height:76px;"/>

6- The word-wrap property added to CSS3 and it is really essential. 
   example : <p style="word-wrap: break-word;...

7- in CSS3 you can Rotate any element by using transform property.
example: div{ transform :rotate(30deg); }

8- The float property specifies whether an element should float to the left, right, or not at all.

9- The clear property specifies what should happen with the element that is next to a floating element.

https://www.w3schools.com/

Continue Reading →