Sujit Kumar Shah
Freelance PHP MySql programmer
Pure CSS Bubble Tooltips
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over me This is my Bubble Tooltip with CSSto see how well these bubble tooltips work. Besides that if you have an advanced site in the first place you probably have enought javascript already.
This example will show you how well this tooltip stretches for long descriptions when you hover here! WWOOWW!,
This
really is a very long tooltip. Normally they aren't this long but
every once in a while you feel the urge to use a really long
description to make sure you get your point across to everyone! This
could go on and on all of the way down the page and probably overflow
onto the next website you visit! No, seriously go check the next
website you planned on visiting..but you have to be quick when you move
the mouse off of this link. I bet you can't do it fast enough ;). Also with the IE hack for the :hover state, you can do this with elements besides anchors.
If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.
This
is next CSS Bubble Tooltips which is very simple and pure CSS Bubble.
It is very usefull for input text box and you can also use for hover
link where you want to describe about that link. You can Hover Here This is my Bubble Tooltip with CSS.
This is pure CSS Bubble Tooltipto see how well there bubble tooltips work.
This CSS Bubble Tooltips is also very simple and usefull for input text box and you can also use for hover link where you want to describe about that link. You can hover over me This is my Bubble Tooltip with CSSto see how well there bubble tooltips work.
Now the last CSS bubble tooltips is most beautiful and simple which you can use to describe any hyperlink, images or wherever you want. Hover Me
This is my Bubble Tooltip with CSS. to see this example.
Tags: CSS Tooltips, Pure CSS Tooltips, Pure CSS Bubble Tooltips
To do articles more effectively, we need your comments or suggestions on how to improve the articles and make it more useful, or what other articles you would like in the future. Please CLICK HERE and leave your feedback. Thanks!!!
- Ajax autocomplete using PHP & MySQL
- Simple JQuery Accordion menu
- XML Web Service using PHP and SOAP
- Reduce High CPU usage overload problem caused by MySql
- Pure CSS Bubble Tooltips
- How to make your website load fast?
- Getting real IP address in PHP
- Basic security vulnerabilities in php code
- How To Enable JavaScript in a Web Browser?
- Beginning Search engine optimization (SEO)
Categories
Archives
Website Services
- » Web 2.0 Website Design
- » Online Shopping (E-commerce)
- » Content Management System
- » Small/Advanced Business Sites
- » Search Engine Optimization
- » Website Maintenance Services
- » Web and Enterprise Portal Development
- » Directory Website
- » Auction, Bidding Website
- » Classified, Marketplace Website
- » Web Application Development
