ToolTips

Add tooltip hints to your links, images and forms!

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


<!-- DC ToolTips CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/tooltips/css/tsc_tooltips.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC ToolTips JS -->
<script type="text/javascript" src="dreamcodes/tooltips/js/tsc_tooltips.js"></script>

Floating Content - Follow

Hover over to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a class="tsc_content_tooltip" href="#">this link<span class="tsc_content_tooltip_container" style="width: 220px;"><img src="http://pimg.co/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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_3dtooltip top left auto black">this link <span><img src="http://pimg.co/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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 to see how how it looks!

View code:


<!-- DC ToolTips Start -->
Hover over <a href="#" class="tsc_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 -->