r2893 - HTML and CSS static examples for tooltip plugin
Author: scottjehl
Date: Wed Jul 8 12:45:38 2009
New Revision: 2893
Added:
branches/dev/tooltip/tests/static/tooltip/
branches/dev/tooltip/tests/static/tooltip/all.html (contents, props
changed)
branches/dev/tooltip/themes/base/ui.tooltip.css (contents, props
changed)
Log:
HTML and CSS static examples for tooltip plugin
Added: branches/dev/tooltip/tests/static/tooltip/all.html
==============================================================================
--- (empty file)
+++ branches/dev/tooltip/tests/static/tooltip/all.html Wed Jul 8 12:45:38
2009
@@ -0,0 +1,164 @@
+<!doctype html>
+<html>
+<head>
+ <title>Tooltip Static Test : All</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <link rel="stylesheet" href="../../../themes/base/ui.tooltip.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript">
+ //note that the border color of the inner triangle must match the
background color of the tooltip div.
+ //Unfortunately, there's no way automate this with the CSS framework...
+ function fixToolTipColor(){
+ //grab the bg color from the tooltip content - set the border color of
inner pointer to same
+ $('.ui-tooltip-pointer-inner').each(function(){
+ var pt = $(this).parents('.ui-tooltip:eq(0)');
+ var bColor = pt.css('backgroundColor');
+
if(pt.is('.ui-tooltip-arrow-rb,.ui-tooltip-arrow-rc,.ui-tooltip-arrow-rt')){
$(this).css('border-left-color', bColor); }
+ else
if(pt.is('.ui-tooltip-arrow-br,.ui-tooltip-arrow-bc,.ui-tooltip-arrow-bl')){
$(this).css('border-top-color', bColor); }
+ else
if(pt.is('.ui-tooltip-arrow-lb,.ui-tooltip-arrow-lc,.ui-tooltip-arrow-lt')){
$(this).css('border-right-color', bColor); }
+ else { $(this).css('border-bottom-color', bColor); }
+ });
+ }
+ //dom ready
+ $(function(){
+ fixToolTipColor();
+ });
+ </script>
+
+
+ <style type="text/css">
+ .ui-tooltip {
+ position: relative;
+ margin: 40px;
+ float: left;
+ }
+ h2 { clear: left; }
+
+ </style>
+
+
+</head>
+<body>
+
+
+ <div class="ui-tooltip ui-widget ui-widget-header ui-corner-all">Here's a
sample tooltip. The pointer requires no images!</div>
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-tl ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-tc ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-tr ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-rt ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-rc ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-rb ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-br ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-bc ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-bl ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-lb ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-lc ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-lt ui-widget ui-widget-header
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-header">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+ <h2>Some additional framework classes</h2>
+
+ <div class="ui-tooltip ui-tooltip-arrow-lt ui-widget ui-widget-content
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-widget-content">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+ <div class="ui-tooltip ui-tooltip-arrow-lt ui-widget ui-state-error
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-state-error">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+ <div class="ui-tooltip ui-tooltip-arrow-lt ui-widget ui-state-highlight
ui-corner-all">Here's a sample tooltip. The pointer requires no images!
+ <div class="ui-tooltip-pointer ui-state-highlight">
+ <div class="ui-tooltip-pointer-inner"></div>
+ </div>
+ </div>
+
+
+
+
+</body>
+</html>
Added: branches/dev/tooltip/themes/base/ui.tooltip.css
==============================================================================
--- (empty file)
+++ branches/dev/tooltip/themes/base/ui.tooltip.css Wed Jul 8 12:45:38 2009
@@ -0,0 +1,43 @@
+/*Tooltip and Pointer CSS*/
+.ui-tooltip { padding:.8em; width:12em; border-width:2px;
position:absolute; z-index:9999; }
+.ui-tooltip .ui-tooltip-pointer,.ui-tooltip .ui-tooltip-pointer-inner {
position:absolute; width:0; height:0; background:none; }
+
+/*top*/
+.ui-tooltip-arrow-tr .ui-tooltip-pointer,.ui-tooltip-arrow-tc .ui-tooltip-pointer,.ui-tooltip-arrow-tl .ui-tooltip-pointer
{
top:-1.4em; border-top:0; border-bottom-width:1.4em; }
+.ui-tooltip-arrow-tr .ui-tooltip-pointer { border-left:1.8em dotted
transparent; border-right:0; right:1em; }
+.ui-tooltip-arrow-tc .ui-tooltip-pointer { border-left:1em dotted
transparent; border-right:1em dotted transparent; left:50%;
margin-left:-1em; }
+.ui-tooltip-arrow-tl .ui-tooltip-pointer { border-left:0;
border-right:1.8em dotted transparent; left:1em; }
+.ui-tooltip-arrow-tr .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tl .ui-tooltip-pointer-inner
{
border-bottom:1em solid #fff; bottom:-1.4em; }
+.ui-tooltip-arrow-tr .ui-tooltip-pointer-inner { border-left:1.2em dotted
transparent; border-right:0; right:.2em; }
+.ui-tooltip-arrow-tc .ui-tooltip-pointer-inner { border-left:.8em dotted
transparent; border-right:.8em dotted transparent; left:-.8em; }
+.ui-tooltip-arrow-tl .ui-tooltip-pointer-inner { border-left:0;
border-right:1.2em dotted transparent; left:.2em; }
+
+/*right*/
+.ui-tooltip-arrow-rb .ui-tooltip-pointer,.ui-tooltip-arrow-rc .ui-tooltip-pointer,.ui-tooltip-arrow-rt .ui-tooltip-pointer
{
right:-1.4em; border-right:0; border-left-width:1.4em; }
+.ui-tooltip-arrow-rb .ui-tooltip-pointer { border-bottom:0;
border-top:1.8em dotted transparent; bottom:1em; }
+.ui-tooltip-arrow-rc .ui-tooltip-pointer { border-bottom:1em dotted
transparent; border-top:1em dotted transparent; bottom:50%;
margin-bottom:-1em; }
+.ui-tooltip-arrow-rt .ui-tooltip-pointer { border-bottom:1.8em dotted
transparent; border-top:0; top:1em; }
+.ui-tooltip-arrow-rb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rt .ui-tooltip-pointer-inner
{
border-left:1em solid #fff; left:-1.4em; }
+.ui-tooltip-arrow-rb .ui-tooltip-pointer-inner { border-bottom:0;
border-top:1.2em dotted transparent; bottom:.2em; }
+.ui-tooltip-arrow-rc .ui-tooltip-pointer-inner { border-bottom:.8em dotted
transparent; border-top:.8em dotted transparent; bottom:-.8em; }
+.ui-tooltip-arrow-rt .ui-tooltip-pointer-inner { border-bottom:1.2em
dotted transparent; border-top:0; top:.2em; }
+
+/*bottom*/
+.ui-tooltip-arrow-br .ui-tooltip-pointer,.ui-tooltip-arrow-bc .ui-tooltip-pointer,.ui-tooltip-arrow-bl .ui-tooltip-pointer
{
bottom:-1.4em; border-bottom:0; border-top-width:1.4em; }
+.ui-tooltip-arrow-br .ui-tooltip-pointer { border-left:1.8em dotted
transparent; border-right:0; right:1em; }
+.ui-tooltip-arrow-bc .ui-tooltip-pointer { border-left:1em dotted
transparent; border-right:1em dotted transparent; left:50%;
margin-left:-1em; }
+.ui-tooltip-arrow-bl .ui-tooltip-pointer { border-left:0;
border-right:1.8em dotted transparent; left:1em; }
+.ui-tooltip-arrow-br .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bl .ui-tooltip-pointer-inner
{
border-top:1em solid #fff; top:-1.4em; }
+.ui-tooltip-arrow-br .ui-tooltip-pointer-inner { border-left:1.2em dotted
transparent; border-right:0; right:.2em; }
+.ui-tooltip-arrow-bc .ui-tooltip-pointer-inner { border-left:.8em dotted
transparent; border-right:.8em dotted transparent; left:-.8em; }
+.ui-tooltip-arrow-bl .ui-tooltip-pointer-inner { border-left:0;
border-right:1.2em dotted transparent; left:.2em; }
+
+/*left*/
+.ui-tooltip-arrow-lb .ui-tooltip-pointer,.ui-tooltip-arrow-lc .ui-tooltip-pointer,.ui-tooltip-arrow-lt .ui-tooltip-pointer
{
left:-1.4em; border-left:0; border-right-width:1.4em; }
+.ui-tooltip-arrow-lb .ui-tooltip-pointer { border-bottom:0;
border-top:1.8em dotted transparent; bottom:1em; }
+.ui-tooltip-arrow-lc .ui-tooltip-pointer { border-bottom:1em dotted
transparent; border-top:1em dotted transparent; bottom:50%;
margin-bottom:-1em; }
+.ui-tooltip-arrow-lt .ui-tooltip-pointer { border-bottom:1.8em dotted
transparent; border-top:0; top:1em; }
+.ui-tooltip-arrow-lb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lt .ui-tooltip-pointer-inner
{
border-right:1em solid #fff; right:-1.4em; }
+.ui-tooltip-arrow-lb .ui-tooltip-pointer-inner { border-bottom:0;
border-top:1.2em dotted transparent; bottom:.2em; }
+.ui-tooltip-arrow-lc .ui-tooltip-pointer-inner { border-bottom:.8em dotted
transparent; border-top:.8em dotted transparent; bottom:-.8em; }
+.ui-tooltip-arrow-lt .ui-tooltip-pointer-inner { border-bottom:1.2em
dotted transparent; border-top:0; top:.2em; }
\ No newline at end of file