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, 01: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>
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
davikerkrish is offline   Reply With Quote

Old 11-11-2012, 11:56 AM   #2
chelsea77
Registered User
 
Join Date: Nov 2012
Posts: 12
nice css technique
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
chelsea77 is offline   Reply With Quote
Old 12-05-2012, 05: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;
}
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Shopping Cart - PrestaShop, Zencart; CMS - WordPress, Joomla; Custom Development


To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- SEO, Pay Per Click (PPC), SEM, Link Popularity Building, SEO Copywriting, SMO, SMM
abhirampathak3 is offline   Reply With Quote
Old 01-02-2013, 08:07 PM   #4
deadmix
Registered User
 
Join Date: Nov 2008
Posts: 53
thank you for this quick code that can be helpful
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
/ 3000+
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
deadmix is offline   Reply With Quote
Old 01-24-2013, 01:50 AM   #5
rsewak
Registered User
 
Join Date: Jan 2013
Posts: 99
I read your CSS Tips - Thanks for share Good Knowledge
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
rsewak is offline   Reply With Quote
Old 01-29-2013, 11:52 AM   #6
deadmix
Registered User
 
Join Date: Nov 2008
Posts: 53
thank you for this simple trick!
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
/ 3000+
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
deadmix is offline   Reply With Quote
Old 02-13-2013, 03:09 AM   #7
AscertaConsult
Registered User
 
Join Date: Feb 2013
Location: Liverpool
Posts: 10
thank you!
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
AscertaConsult is offline   Reply With Quote
Old 02-13-2013, 08:12 PM   #8
Kamrul Manna
Registered User
 
Join Date: Feb 2013
Posts: 14
Thanks for this topic.
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
Kamrul Manna is offline   Reply With Quote
Old 02-20-2013, 10: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.
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
mikerock is offline   Reply With Quote
Old 02-25-2013, 08: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, 04:57 AM   #11
vivekaryan
Registered User
 
Join Date: Apr 2013
Posts: 58
thanks for sharing this info.....
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
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 03:48 PM.


Powered by vBulletin Copyright © 2013 vBulletin Solutions, Inc.