Skip to content
This repository has been archived by the owner on Jun 14, 2020. It is now read-only.

Commit

Permalink
Updated CSS to implement background tiling of close-icons. Also updat…
Browse files Browse the repository at this point in the history 
…ed tip colour detection after further regressions were found.
  • Loading branch information
@Craga89
Craga89 committed Dec 30, 2010
1 parent 6dceaca commit 7281144
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 106 deletions.
44 changes: 23 additions & 21 deletions dist/jquery.qtip.css
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Dec 30 05:18:20 2010 +0000
* Date: Thu Dec 30 07:06:44 2010 +0000
*/

.ui-tooltip-accessible{
Expand Down Expand Up @@ -77,16 +77,22 @@
cursor: pointer;
}

.ui-tooltip-close .ui-tooltip-icon{
.ui-tooltip-close .ui-tooltip-icon,
.ui-tooltip-close .ui-icon{
float: right;
height: 16px;
width: 16px;
display: block;

}

.ui-tooltip-close .ui-tooltip-icon{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);

background: transparent url('images/close-icons.png') no-repeat -100em -100em;
}

.ui-tooltip-close:hover .ui-tooltip-icon{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
Expand All @@ -98,10 +104,6 @@

}

/* Themroller compatibilty classes */
.ui-widget-header .ui-icon{
float: right;
}

/*! Default tooltip style */
.ui-tooltip-titlebar,
Expand All @@ -118,8 +120,8 @@
background-color: #F0DE7D;
}

.ui-tooltip-icon{
background: #A27D35 url('images/close.png') no-repeat 50% 50%;
.ui-tooltip-close .ui-tooltip-icon{
background-position: -82px 0;
}


Expand All @@ -139,7 +141,7 @@
}

.ui-tooltip-light .ui-tooltip-icon{
background: #454545 url('images/close-light.png') no-repeat 50% 50%;
background-position: -62px 0;
}


Expand All @@ -159,7 +161,7 @@
}

.ui-tooltip-dark .ui-tooltip-icon{
background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}


Expand All @@ -179,7 +181,7 @@
}

.ui-tooltip-red .ui-tooltip-icon{
background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;
background-position: -102px 0;
}


Expand All @@ -199,7 +201,7 @@
}

.ui-tooltip-green .ui-tooltip-icon{
background: #58792E url('images/close-green.png') no-repeat 50% 50%;
background-position: -42px 0;
}


Expand All @@ -219,7 +221,7 @@
}

.ui-tooltip-blue .ui-tooltip-icon{
background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;
background-position: -2px 0;
}


Expand Down Expand Up @@ -291,17 +293,17 @@ div.ui-tooltip-tip{
box-shadow: 0 0 3px #333;
}

.ui-tooltip-youtube .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
}

.ui-tooltip-youtube .ui-tooltip-titlebar,
.ui-tooltip-youtube .ui-tooltip-content{
background: transparent;
color: white;

border: 0px transparent;
}

.ui-tooltip-youtube .ui-tooltip-icon{
background-position: -22px 0;
}


/* jQuery TOOLS Tooltip style */
Expand Down Expand Up @@ -331,7 +333,7 @@ div.ui-tooltip-tip{
}

.ui-tooltip-jtools .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}


Expand Down Expand Up @@ -396,5 +398,5 @@ div.ui-tooltip-tip{
}

.ui-tooltip-tipsy .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}
11 changes: 5 additions & 6 deletions dist/jquery.qtip.js
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Dec 30 05:18:20 2010 +0000
* Date: Thu Dec 30 07:06:44 2010 +0000
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
Expand Down Expand Up @@ -229,8 +229,7 @@ function QTip(target, options, id)
else {
elems.button = $('<a />', {
'class': 'ui-state-default',
'title': 'Close tooltip',
'css': { 'text-indent': '-10000em' }
'title': 'Close tooltip'
})
.prepend(
$('<span />', { 'class': (options.style.widget ? 'ui' : uitooltip) + '-icon ui-icon-close' })
Expand Down Expand Up @@ -1803,16 +1802,16 @@ function Tip(qTip, command)

// Detect tip colours from CSS styles
color.fill = tip.css(backgroundColor) || transparent;
color.border = tip.css(borderSide) || transparent;
color.border = tip[0].style[ borderSideCamel ];

// Make sure colours are valid
if(invalid.test(color.fill)) {
if(!color.fill || invalid.test(color.fill)) {
color.fill = colorElem.css(backgroundColor);
if(invalid.test(color.fill)) {
color.fill = tooltip.css(backgroundColor);
}
}
if(invalid.test(color.border)) {
if(!color.border || invalid.test(color.border)) {
color.border = colorElem.css(borderSide);
if(invalid.test(color.border)) {
color.border = tooltip.css(borderSide) || color.fill;
Expand Down
104 changes: 52 additions & 52 deletions dist/jquery.qtip.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.qtip.pack.js
View file

Large diffs are not rendered by default.

Binary file added images/close-icons.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 16 additions & 14 deletions src/core.css
View file
Expand Up @@ -63,16 +63,22 @@
cursor: pointer;
}

.ui-tooltip-close .ui-tooltip-icon{
.ui-tooltip-close .ui-tooltip-icon,
.ui-tooltip-close .ui-icon{
float: right;
height: 16px;
width: 16px;
display: block;

}

.ui-tooltip-close .ui-tooltip-icon{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);

background: transparent url('images/close-icons.png') no-repeat -100em -100em;
}

.ui-tooltip-close:hover .ui-tooltip-icon{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
Expand All @@ -84,10 +90,6 @@

}

/* Themroller compatibilty classes */
.ui-widget-header .ui-icon{
float: right;
}

/*! Default tooltip style */
.ui-tooltip-titlebar,
Expand All @@ -104,8 +106,8 @@
background-color: #F0DE7D;
}

.ui-tooltip-icon{
background: #A27D35 url('images/close.png') no-repeat 50% 50%;
.ui-tooltip-close .ui-tooltip-icon{
background-position: -82px 0;
}


Expand All @@ -125,7 +127,7 @@
}

.ui-tooltip-light .ui-tooltip-icon{
background: #454545 url('images/close-light.png') no-repeat 50% 50%;
background-position: -62px 0;
}


Expand All @@ -145,7 +147,7 @@
}

.ui-tooltip-dark .ui-tooltip-icon{
background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}


Expand All @@ -165,7 +167,7 @@
}

.ui-tooltip-red .ui-tooltip-icon{
background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;
background-position: -102px 0;
}


Expand All @@ -185,7 +187,7 @@
}

.ui-tooltip-green .ui-tooltip-icon{
background: #58792E url('images/close-green.png') no-repeat 50% 50%;
background-position: -42px 0;
}


Expand All @@ -205,7 +207,7 @@
}

.ui-tooltip-blue .ui-tooltip-icon{
background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;
background-position: -2px 0;
}


Expand Down
3 changes: 1 addition & 2 deletions src/core.js
View file
Expand Up @@ -204,8 +204,7 @@ function QTip(target, options, id)
else {
elems.button = $('<a />', {
'class': 'ui-state-default',
'title': 'Close tooltip',
'css': { 'text-indent': '-10000em' }
'title': 'Close tooltip'
})
.prepend(
$('<span />', { 'class': (options.style.widget ? 'ui' : uitooltip) + '-icon ui-icon-close' })
Expand Down
12 changes: 6 additions & 6 deletions src/extra.css
View file
Expand Up @@ -12,17 +12,17 @@
box-shadow: 0 0 3px #333;
}

.ui-tooltip-youtube .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
}

.ui-tooltip-youtube .ui-tooltip-titlebar,
.ui-tooltip-youtube .ui-tooltip-content{
background: transparent;
color: white;

border: 0px transparent;
}

.ui-tooltip-youtube .ui-tooltip-icon{
background-position: -22px 0;
}


/* jQuery TOOLS Tooltip style */
Expand Down Expand Up @@ -52,7 +52,7 @@
}

.ui-tooltip-jtools .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}


Expand Down Expand Up @@ -117,5 +117,5 @@
}

.ui-tooltip-tipsy .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
background-position: -22px 0;
}
6 changes: 3 additions & 3 deletions src/tips.js
View file
Expand Up @@ -178,16 +178,16 @@ function Tip(qTip, command)

// Detect tip colours from CSS styles
color.fill = tip.css(backgroundColor) || transparent;
color.border = tip.css(borderSide) || transparent;
color.border = tip[0].style[ borderSideCamel ];

// Make sure colours are valid
if(invalid.test(color.fill)) {
if(!color.fill || invalid.test(color.fill)) {
color.fill = colorElem.css(backgroundColor);
if(invalid.test(color.fill)) {
color.fill = tooltip.css(backgroundColor);
}
}
if(invalid.test(color.border)) {
if(!color.border || invalid.test(color.border)) {
color.border = colorElem.css(borderSide);
if(invalid.test(color.border)) {
color.border = tooltip.css(borderSide) || color.fill;
Expand Down

0 comments on commit 7281144

Please sign in to comment.