CSS Based Tool Tip

Hello Folks!! I am back with another interesting post for you. I hope you find my previous post helpful to you. Today I will be sharing something interesting about Tool tips. As you all have seen on website these days, there are lot many tool tips available with different styles. Actually a Tool Tip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface. This message may consist of some text, image, hyperlink or may be some audio, video files.

A basic tool tip consist mainly of three parts: some text, a different color background with borders and a pointer pointing towards some text on the webpage to which this tool tip is linked. Before CSS3 was introduced, tool tips were designed and induced using some scripting in web pages. Since CSS3 can in existance, it has became quite easy to design a tool tip. Today I am sharing some very basic tool tips created using CSS3 and HTML only. Their is no use of JavaScript. To see more check out the demo file attached with this post.

     

Advertisements

5-Star Rating (No Script)

In the earlier post, I shared how to create Star Rating by using some scripting. In this post, we will create 5-Star rating without using any kind of scripting and also to mention this 5-star rating will work just fine as any other rating. This rating is created by just using some HTML and CSS. To make this rating work fine we have added some pseudo classes in CSS, to make it work fine. These pseudo classes allows to add style effects on hovering, on focussing and even when the stars are checked.

Star Rating
Star Rating

The above image defines layout about how the star rating will appear. There is a 5-star rating. Each star rating has different title value. These star are defined using input tag with radio type. Each of these are floated to left using CSS Float property. When we submit the form, the specific value related to that particular star is forwarded to the server.These stars are enclosed within a fieldset followed by legend tag.

     

Back To Work After Long Holidays…

Hello Folks, Good News for you guys, Your friend your author is back on to this blog after a long festive & seasonal holidays. Yes I am back with a new look and some more interesting aim and some cool ideas. Hope you will enjoy my company once again.

Some news from my side:
1. Celebrated Dussehra with lots and lots of friends and family members
2. On the eve of Dhanteras, brought new Mobile Handset Nokia Lumia 720.
3. Diwali was celebrated with great zeal, bursted lots and lots of Crackers.. Total Fun
4. Later during seasonal vacation, was busy in cousin sis marriage preparations.

Finally back after a holidays of almost 2 Months. Now ready to add some cool post everyday or so. So sit back and enjoy the learning ride with me your friend cum author..Have a Good Day ahead… Byeee!!!

Watt Ease

Watt Ease is a new analytics and insights service providing company. Its Corporate Office is in San Francisco (USA). The company was started in early 2012. It provide complete info to its customers regarding power saving. They are providing helping utilities to better engage their residential and small and medium business customers. They asked us to create small but colorful mail for their power saving campaigns.

Watt Alerts

Watt Alerts

    

Advizex Mails

Advizex is a famous company. We received a request to create email as per their requirements. They asked as me to create 3 different set of emails, With similar black background. The footer section contains branding logo as well as other clients of Advizex.

Advizex Mail

Advizex Mail


This email provide us details about different data storage plans. The body section contain a download button at the bottom. If the user or client clicks this button…..

    

Evolis Branding

Logo

Evolis is one of the popular brand in Australia. The brand actually started with a single product. Now the brand is distributing multiple product all over the world. During last Christmas, The company started a new discount offer on their products, through E-Advertisment, The E-Advertisment page was created by me for the website and their personal blog. The advertisment provides complete info about discounts on differnt products.