Register on the forum now to remove ALL ads + popups + get access to tons of hidden content for members only!

Go Back   Site Owners Forums - Webmaster Forums > Web Programming > Programming General > HTML / DHTML

Notices


Reply
 
Thread Tools Rate Thread Display Modes
Old 10-31-2012, 12:36 AM   #1
davikerkrish
Registered User
 
Join Date: Jul 2012
Posts: 111
CSS Tooltips

We can create a tool tip using CSS. When mouse over the link the tool tip content will display otherwise display none.


a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

<a href="#" class="tooltip">Tooltip<span> Extra info </span></a>
__________________
dialler | case management software
davikerkrish is offline   Reply With Quote

Old 11-11-2012, 10:56 AM   #2
chelsea77
Registered User
 
Join Date: Nov 2012
Posts: 12
nice css technique
chelsea77 is offline   Reply With Quote
Old 12-05-2012, 04:08 AM   #3
abhirampathak3
Registered User
 
Join Date: Nov 2012
Location: India
Posts: 105
I have a technique of tool tip. Code is bellow

a[data-tooltip]:link, a[data-tooltip]:visited {
position: relative;
text-decoration: none;
border-bottom: solid 1px;
}

a[data-tooltip]:before {
content: "";
position: absolute;
border-top: 20px solid #0090ff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}
__________________
Web Development Services - Shopping Cart - PrestaShop, Zencart; CMS - WordPress, Joomla; Custom Development

Quality SEO Services - SEO, Pay Per Click (PPC), SEM, Link Popularity Building, SEO Copywriting, SMO, SMM
abhirampathak3 is offline   Reply With Quote
Old 01-02-2013, 07:07 PM   #4
deadmix
Registered User
 
Join Date: Nov 2008
Posts: 53
thank you for this quick code that can be helpful
deadmix is offline   Reply With Quote
Old 01-24-2013, 12:50 AM   #5
rsewak
Registered User
 
Join Date: Jan 2013
Posts: 99
I read your CSS Tips - Thanks for share Good Knowledge
rsewak is offline   Reply With Quote
Old 01-29-2013, 10:52 AM   #6
deadmix
Registered User
 
Join Date: Nov 2008
Posts: 53
thank you for this simple trick!
deadmix is offline   Reply With Quote
Old 02-13-2013, 02:09 AM   #7
AscertaConsult
Registered User
 
Join Date: Feb 2013
Location: Liverpool
Posts: 10
thank you!
AscertaConsult is offline   Reply With Quote
Old 02-13-2013, 07:12 PM   #8
Kamrul Manna
Registered User
 
Join Date: Feb 2013
Posts: 14
Thanks for this topic.
Kamrul Manna is offline   Reply With Quote
Old 02-20-2013, 09:16 AM   #9
mikerock
Registered User
 
Join Date: Jan 2013
Posts: 23
that nice. could you share more tooltips if you have. I appreciate your work.
mikerock is offline   Reply With Quote
Old 02-25-2013, 07:02 AM   #10
parab01a
Registered User
 
Join Date: Feb 2013
Posts: 10
Just what I was looking for, Thanks!
parab01a is offline   Reply With Quote
Old 04-19-2013, 03:57 AM   #11
vivekaryan
Registered User
 
Join Date: Apr 2013
Posts: 58
thanks for sharing this info.....
vivekaryan is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 07:09 AM.


Powered by vBulletin Copyright © 2013 vBulletin Solutions, Inc.