diff --git a/bootstrap3/bootstrap-tooltip-custom-class.css b/bootstrap-v3.3.7/bootstrap-tooltip-custom-class.css similarity index 100% rename from bootstrap3/bootstrap-tooltip-custom-class.css rename to bootstrap-v3.3.7/bootstrap-tooltip-custom-class.css diff --git a/bootstrap-v3.3.7/bootstrap-tooltip-custom-class.js b/bootstrap-v3.3.7/bootstrap-tooltip-custom-class.js new file mode 100644 index 0000000..0c5ab9e --- /dev/null +++ b/bootstrap-v3.3.7/bootstrap-tooltip-custom-class.js @@ -0,0 +1,34 @@ +/* ================================================ + * bootstrap-tooltip-custom-class.js v0.0.1 + * + * Extend Bootstrap 3 Tooltip plugin by adding custom classes. + * Custom classes can be added by using `customClass` parameter or via `data-custom-class` attribute. + * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. + * ============================================= */ + +(function ($) { + + if (typeof $.fn.tooltip.Constructor === 'undefined') { + throw new Error('Bootstrap Tooltip must be included first!'); + } + + var Tooltip = $.fn.tooltip.Constructor; + + $.extend( Tooltip.DEFAULTS, { + customClass: '' + }); + + var _show = Tooltip.prototype.show; + + Tooltip.prototype.show = function () { + + _show.apply(this,Array.prototype.slice.apply(arguments)); + + if ( this.options.customClass ) { + var $tip = this.tip(); + $tip.addClass(this.options.customClass); + } + + }; + +})(window.jQuery); diff --git a/bootstrap3/bootstrap-tooltip-custom-class.scss b/bootstrap-v3.3.7/bootstrap-tooltip-custom-class.scss similarity index 100% rename from bootstrap3/bootstrap-tooltip-custom-class.scss rename to bootstrap-v3.3.7/bootstrap-tooltip-custom-class.scss diff --git a/bootstrap3/example.html b/bootstrap-v3.3.7/example.html similarity index 100% rename from bootstrap3/example.html rename to bootstrap-v3.3.7/example.html diff --git a/bootstrap4/bootstrap-tooltip-custom-class.css b/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.css similarity index 100% rename from bootstrap4/bootstrap-tooltip-custom-class.css rename to bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.css diff --git a/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.js b/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.js new file mode 100644 index 0000000..ac8bc7e --- /dev/null +++ b/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.js @@ -0,0 +1,36 @@ +/* ================================================ + * bootstrap4-tooltip-custom-class.js v0.0.1 + * + * Extend Bootstrap v4.0.0-alpha.6 Tooltip plugin by adding custom classes. + * Custom classes can be added by using `customClass` paramater or via `data-custom-class` attribute. + * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. + * ============================================= */ + +;(function($) { + + if (typeof $.fn.tooltip.Constructor === 'undefined') { + throw new Error('Bootstrap Tooltip must be included first!'); + } + + var Tooltip = $.fn.tooltip.Constructor; + + // add customClass option to Bootstrap Tooltip + $.extend( Tooltip.Default, { + customClass: '' + }); + + var _show = Tooltip.prototype.show; + + Tooltip.prototype.show = function () { + + // invoke parent method + _show.apply(this,Array.prototype.slice.apply(arguments)); + + if (this.config.customClass) { + var tip = this.getTipElement(); + $(tip).addClass(this.config.customClass); + } + + }; + +})(window.jQuery); \ No newline at end of file diff --git a/bootstrap4/bootstrap-tooltip-custom-class.scss b/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.scss similarity index 99% rename from bootstrap4/bootstrap-tooltip-custom-class.scss rename to bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.scss index 22b0ca7..8b8da7f 100644 --- a/bootstrap4/bootstrap-tooltip-custom-class.scss +++ b/bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.scss @@ -97,4 +97,3 @@ $tooltip-danger-bg: $brand-danger !default; .tooltip-danger { @include tooltip-custom($tooltip-danger-bg); } - diff --git a/bootstrap4/example.html b/bootstrap-v4.0.0-alpha.6/example.html similarity index 97% rename from bootstrap4/example.html rename to bootstrap-v4.0.0-alpha.6/example.html index 7a02f35..1d9223b 100644 --- a/bootstrap4/example.html +++ b/bootstrap-v4.0.0-alpha.6/example.html @@ -2,7 +2,7 @@ - Bootstrap 4 Tooltip Custom Classes + Bootstrap v4.0.0-alpha.6 Tooltip Custom Classes @@ -133,7 +133,7 @@

Dinamic examples

- + diff --git a/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.css b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.css new file mode 100644 index 0000000..92d7468 --- /dev/null +++ b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.css @@ -0,0 +1,79 @@ +.tooltip-primary .tooltip-inner { + background-color: #007bff; +} +.tooltip-primary.bs-tooltip-top .arrow:before { + border-top-color: #007bff; +} +.tooltip-primary.bs-tooltip-right .arrow:before { + border-right-color: #007bff; +} +.tooltip-primary.bs-tooltip-left .arrow:before { + border-left-color: #007bff; +} +.tooltip-primary.bs-tooltip-bottom .arrow:before { + border-bottom-color: #007bff; +} + +.tooltip-success .tooltip-inner { + background-color: #28a745; +} +.tooltip-success.bs-tooltip-top .arrow:before { + border-top-color: #28a745; +} +.tooltip-success.bs-tooltip-right .arrow:before { + border-right-color: #28a745; +} +.tooltip-success.bs-tooltip-left .arrow:before { + border-left-color: #28a745; +} +.tooltip-success.bs-tooltip-bottom .arrow:before { + border-bottom-color: #28a745; +} + +.tooltip-info .tooltip-inner { + background-color: #17a2b8; +} +.tooltip-info.bs-tooltip-top .arrow:before { + border-top-color: #17a2b8; +} +.tooltip-info.bs-tooltip-right .arrow:before { + border-right-color: #17a2b8; +} +.tooltip-info.bs-tooltip-left .arrow:before { + border-left-color: #17a2b8; +} +.tooltip-info.bs-tooltip-bottom .arrow:before { + border-bottom-color: #17a2b8; +} + +.tooltip-warning .tooltip-inner { + background-color: #ffc107; +} +.tooltip-warning.bs-tooltip-top .arrow:before { + border-top-color: #ffc107; +} +.tooltip-warning.bs-tooltip-right .arrow:before { + border-right-color: #ffc107; +} +.tooltip-warning.bs-tooltip-left .arrow:before { + border-left-color: #ffc107; +} +.tooltip-warning.bs-tooltip-bottom .arrow:before { + border-bottom-color: #ffc107; +} + +.tooltip-danger .tooltip-inner { + background-color: #dc3545; +} +.tooltip-danger.bs-tooltip-top .arrow:before { + border-top-color: #dc3545; +} +.tooltip-danger.bs-tooltip-right .arrow:before { + border-right-color: #dc3545; +} +.tooltip-danger.bs-tooltip-left .arrow:before { + border-left-color: #dc3545; +} +.tooltip-danger.bs-tooltip-bottom .arrow:before { + border-bottom-color: #dc3545; +} diff --git a/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.js b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.js new file mode 100644 index 0000000..4701b8f --- /dev/null +++ b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.js @@ -0,0 +1,36 @@ +/* ================================================ + * bootstrap4-tooltip-custom-class.js v0.0.1 + * + * Extend Bootstrap v4.0.0-beta Tooltip plugin by adding custom classes. + * Custom classes can be added by using `customClass` paramater or via `data-custom-class` attribute. + * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. + * ============================================= */ + +;(function($) { + + if (typeof $.fn.tooltip.Constructor === 'undefined') { + throw new Error('Bootstrap Tooltip must be included first!'); + } + + var Tooltip = $.fn.tooltip.Constructor; + + // add customClass option to Bootstrap Tooltip + $.extend( Tooltip.Default, { + customClass: '' + }); + + var _show = Tooltip.prototype.show; + + Tooltip.prototype.show = function () { + + // invoke parent method + _show.apply(this,Array.prototype.slice.apply(arguments)); + + if ( this.config.customClass ) { + var tip = this.getTipElement(); + $(tip).addClass(this.config.customClass); + } + + }; + +})(window.jQuery); \ No newline at end of file diff --git a/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.scss b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.scss new file mode 100644 index 0000000..b5eb59d --- /dev/null +++ b/bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.scss @@ -0,0 +1,91 @@ +//== Some Bootstrap variables for Tooltips +// +//## + +// the following lines can be deleted if the variables are already declared +$blue: #007bff !default; +$red: #dc3545 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$cyan: #17a2b8 !default; + + +$theme-colors: () !default; +$theme-colors: map-merge(( + primary: $blue, + success: $green, + info: $cyan, + warning: $yellow, + danger: $red +), $theme-colors); + +// +$tooltip-color: #fff; + +// +// Tooltip primary background color +$tooltip-primary-bg: map-get($theme-colors, "primary") !default; +// Tooltip success background color +$tooltip-success-bg: map-get($theme-colors, "success") !default; +// Tooltip info background color +$tooltip-info-bg: map-get($theme-colors, "info") !default; +// Tooltip warning background color +$tooltip-warning-bg: map-get($theme-colors, "warning") !default; +// Tooltip danger background color +$tooltip-danger-bg: map-get($theme-colors, "danger") !default; + + +//== Tooltip Custom Mixin +// +//## +@mixin tooltip-custom($bg-color, $color: $tooltip-color) { + + .tooltip-inner { + background-color: $bg-color; + @if $color != $tooltip-color { + color: $color; + } + } + + &.bs-tooltip-top .arrow:before { + border-top-color: $bg-color; + } + + &.bs-tooltip-right .arrow:before { + border-right-color: $bg-color; + } + + &.bs-tooltip-left .arrow:before { + border-left-color: $bg-color; + } + + &.bs-tooltip-bottom .arrow:before { + border-bottom-color: $bg-color; + } + +} + + +//== Styles for predefined Tooltip Custom Classes +// +//## +.tooltip-primary { + @include tooltip-custom($tooltip-primary-bg); +} + +.tooltip-success { + @include tooltip-custom($tooltip-success-bg); +} + +.tooltip-info { + @include tooltip-custom($tooltip-info-bg); +} + +.tooltip-warning { + @include tooltip-custom($tooltip-warning-bg); +} + +.tooltip-danger { + @include tooltip-custom($tooltip-danger-bg); +} + diff --git a/bootstrap-v4.0.0-beta/example.html b/bootstrap-v4.0.0-beta/example.html new file mode 100644 index 0000000..9f6836c --- /dev/null +++ b/bootstrap-v4.0.0-beta/example.html @@ -0,0 +1,174 @@ + + + + + Bootstrap v4.0.0-beta Tooltip Custom Classes + + + + + + + + + + + + +
+ +

Static examples

+ +
+ + + + + + + + + + + +
+ +
+ + + + + +
+ +
+ +
+ +

Dinamic examples

+ +
+ + + + + + + + + + + +
+ +
+ + + + + +
+ +
+ + + + + + + + + + + diff --git a/bootstrap3/bootstrap-tooltip-custom-class.js b/bootstrap3/bootstrap-tooltip-custom-class.js deleted file mode 100644 index 4e2a18c..0000000 --- a/bootstrap3/bootstrap-tooltip-custom-class.js +++ /dev/null @@ -1,34 +0,0 @@ -/* ================================================ - * bootstrap-tooltip-custom-class.js v0.0.1 - * - * Extend Bootstrap 3 Tooltip plugin by adding custom classes. - * Custom classes can be added by using `customClass` parameter or via `data-custom-class` attribute. - * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. - * ============================================= */ - -(function ($) { - - if (typeof $.fn.tooltip.Constructor === 'undefined') { - throw new Error('Bootstrap Tooltip must be included first!'); - } - - var Tooltip = $.fn.tooltip.Constructor; - - $.extend( Tooltip.DEFAULTS, { - customClass: '' - }); - - var _show = Tooltip.prototype.show; - - Tooltip.prototype.show = function () { - - _show.apply(this,Array.prototype.slice.apply(arguments)); - - if ( this.options.customClass ) { - var $tip = this.tip() - $tip.addClass(this.options.customClass); - } - - }; - -})(window.jQuery); diff --git a/bootstrap4/bootstrap-tooltip-custom-class.js b/bootstrap4/bootstrap-tooltip-custom-class.js deleted file mode 100644 index b07fee6..0000000 --- a/bootstrap4/bootstrap-tooltip-custom-class.js +++ /dev/null @@ -1,36 +0,0 @@ -/* ================================================ - * bootstrap4-tooltip-custom-class.js v0.0.1 - * - * Extend Bootstrap 4 Tooltip plugin by adding custom classes. - * Custom classes can be added by using `customClass` paramater or via `data-custom-class` attribute. - * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. - * ============================================= */ - -;(function($) { - - if (typeof $.fn.tooltip.Constructor === 'undefined') { - throw new Error('Bootstrap Tooltip must be included first!'); - } - - var Tooltip = $.fn.tooltip.Constructor; - - // add customClass option to Bootstrap Tooltip - $.extend( Tooltip.Default, { - customClass: '' - }); - - var _show = Tooltip.prototype.show; - - Tooltip.prototype.show = function () { - - // invoke parent method - _show.apply(this,Array.prototype.slice.apply(arguments)); - - if ( this.config.customClass ) { - var tip = this.getTipElement(); - $(tip).addClass(this.config.customClass); - } - - }; - -})(window.jQuery); \ No newline at end of file