Custom theme for Ext.tip.ToolTip
I am working on a custom theme for a ToolTip. Since the existing qtip mixin function does not support any params, I added the following UI function into my theme file substituting variables for params:
Code:
//define a helper for customizing tips
@mixin extjs-tip-ui(
$ui,
$border-radius: $tip-border-radius,
$border-width: $tip-border-width,
$border-color: $tip-border-color,
$background-color: $tip-background-color,
$background-gradient: $tip-background-gradient,
$body-color: $tip-body-color,
$body-font-size: $tip-body-font-size,
$body-font-weight: $tip-body-font-weight,
$body-link-color: $tip-body-link-color,
$body-padding: $tip-body-padding,
$header-color: $tip-header-color,
$header-font-size: $tip-header-font-size,
$header-font-weight: $tip-header-font-weight,
$header-padding: $tip-header-padding,
$anchor-border-width: 5px,
$anchor-border-color: $tip-border-color,
$anchor-width: 10px,
$anchor-height: 10px
) {
.#{$prefix}tip-#{$ui} {
position: absolute;
overflow: visible; /*pointer needs to be able to stick out*/
border-color: $border-color;
.#{$prefix}tip-header {
.#{$prefix}box-item {
padding: $header-padding;
}
.#{$prefix}tool {
padding: 0px 1px 0 0 !important;
}
}
}
@include x-frame(
$cls: 'tip',
$ui: $ui,
$border-radius: $border-radius,
$border-width: $border-width,
$background-color: $background-color,
$background-gradient: $background-gradient,
$table: true
);
.#{$prefix}tip-header-text-#{$ui} {
@include no-select;
color: $header-color;
font-size: $header-font-size;
font-weight: $header-font-weight;
}
.#{$prefix}tip-header-draggable-#{$ui} {
.#{$prefix}tip-header-text {
cursor: move;
}
}
// Tip is a Panel. It uses dock layout. Body style must be the same
.#{$prefix}tip-body-#{$ui},
.#{$prefix}form-invalid-tip-body-#{$ui} {
overflow: hidden;
position: relative;
padding: $body-padding;
}
.#{$prefix}tip-header-#{$ui},
.#{$prefix}tip-body-#{$ui},
.#{$prefix}form-invalid-tip-body-#{$ui} {
color: $body-color;
font-size: $body-font-size;
font-weight: $body-font-weight;
a {
color: $body-link-color;
}
}
//nesting for customizing the anchor since the anchorEl does not get the UI class explicitly
.#{$prefix}border-box .#{$prefix}tip-#{$ui} .#{$prefix}tip-anchor {
width: $anchor-width;
height: $anchor-height;
}
.#{$prefix}tip-#{$ui} {
.#{$prefix}tip-anchor {
position: absolute;
overflow: hidden;
height: 0;
width: 0;
border-style: solid;
border-width: $anchor-border-width;
border-color: $anchor-border-color;
zoom: 1;
}
.#{$prefix}tip-anchor-top {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@if $include_ie {
_border-top-color: pink;
_border-left-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-bottom {
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@if $include_ie {
_border-bottom-color: pink;
_border-left-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
@if $include-ie {
_border-top-color: pink;
_border-bottom-color: pink;
_border-left-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
@if $include-ie {
_border-top-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
}
//TODO: error qtip
};
With this UI function, I am able to create a custom UI definition, such as:
Code:
@include extjs-tip-ui(
$ui: 'my-tip',
//$border-radius: 30px,
$border-width: 2px,
$border-color: orange,
$background-color: yellow,
$background-gradient: color-stops(yellow, orange),
$header-padding: 3px 5px 0,
$anchor-border-width: 10px,
$anchor-border-color: orange,
$anchor-width: 20px,
$anchor-height: 20px
);
All of this works great for browsers that support gradients. However, I also need to support legacy browsers like IE and so I'm using the following manifest:
Code:
Ext.onReady(function() {
Ext.manifest = {
widgets: [{
xtype: 'widget.tooltip',
ui: 'my-tip'
}]
};
});
The problems: - the images being generated do not match the names referenced in the CSS theme. File names are "tip-default-corners.gif" and "tip-default-sides.gif" but the CSS has "...tip-my-tip-corners.gif" and "...tip-my-tip-sides.gif"
- the "tip-default-sides.gif" image is 0 bytes and the "tip-default-corners.gif" is all white.
P.S. I did not include it here in my manifest but I have a custom UI definition for a button, which works perfectly for legacy browsers.
