This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Tooltips

Add tooltip hints to your links, images and forms!

Local: CSS/JS files (add code to <HEAD> section):

1
2
3
4
5
6
<!-- DC ToolTips CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/tooltips/css/dc_tooltips.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC ToolTips JS -->
<script type="text/javascript" src="dcodes/tooltips/js/dc_tooltips.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

1
2
3
4
5
6
<!-- DC ToolTips CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tooltips/css/dc_tooltips.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC ToolTips JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/tooltips/js/dc_tooltips.js"></script>

Floating Content - Follow

Hover over this linkImage Caption
This is a random image placed in a [span] container.
to see how how it looks!

View code:

1
2
3
4
<!-- DC ToolTips Start -->
Hover over <a class="dc_content_tooltip" href="#">this link<span class="dc_content_tooltip_container" style="width: 220px;"><img src="http://cdn.dcodes.net/p/215x175" style="float: left;" alt="" /><strong>Image Caption</strong><br />This is a random image placed in a [span] container.</span></a> to see how how it looks!
<!-- DC ToolTips End -->
            

Floating Content - 3D Black

Hover over this link to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto black">this link <span><img src="http://cdn.dcodes.net/p/215x175" style="float: left;"></span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Black

Hover over this link This is black tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto black">this link <span>This is <strong>black</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D White

Hover over this link This is white tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto white">this link <span>This is <strong>white</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Green

Hover over this link This is green tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto green">this link <span>This is <strong>green</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Orange

Hover over this link This is orange tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto orange">this link <span>This is <strong>orange</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Blue

Hover over this link This is blue tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto blue">this link <span>This is <strong>blue</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Yellow

Hover over this link This is yellow tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto yellow">this link <span>This is <strong>yellow</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Red

Hover over this link This is red tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto red">this link <span>This is <strong>red</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

3D Teal

Hover over this link This is teal tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_3dtooltip top left auto teal">this link <span>This is <strong>teal</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Black

Hover over this link This is black tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto black">this link <span>This is <strong>black</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat White

Hover over this link This is white tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto white">this link <span>This is <strong>white</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Green

Hover over this link This is green tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto green">this link <span>This is <strong>green</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Orange

Hover over this link This is orange tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto orange">this link <span>This is <strong>orange</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Blue

Hover over this link This is blue tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto blue">this link <span>This is <strong>blue</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Yellow

Hover over this link This is yellow tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto yellow">this link <span>This is <strong>yellow</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Red

Hover over this link This is red tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto red">this link <span>This is <strong>red</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->

Flat Teal

Hover over this link This is teal tooltip example. to see how how it looks!

View code:

1
2
3
<!-- DC ToolTips Start -->
Hover over <a href="#" class="dc_flat_tooltip top left auto teal">this link <span>This is <strong>teal</strong> tooltip example.</span></a> to see how how it looks!
<!-- DC ToolTips End -->


© TemplateAccess