Skip to content

Added support for Bootstrap v4.0.0-beta #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 10, 2017
Merged

Added support for Bootstrap v4.0.0-beta #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...strap3/bootstrap-tooltip-custom-class.css → ...v3.3.7/bootstrap-tooltip-custom-class.css
View file
Open in desktop
File renamed without changes.
34 changes: 34 additions & 0 deletions bootstrap-v3.3.7/bootstrap-tooltip-custom-class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
0 ...trap3/bootstrap-tooltip-custom-class.scss → ...3.3.7/bootstrap-tooltip-custom-class.scss
View file
Open in desktop
File renamed without changes.
0 bootstrap3/example.html → bootstrap-v3.3.7/example.html
View file
Open in desktop
File renamed without changes.
0 ...strap4/bootstrap-tooltip-custom-class.css → ...lpha.6/bootstrap-tooltip-custom-class.css
View file
Open in desktop
File renamed without changes.
36 changes: 36 additions & 0 deletions bootstrap-v4.0.0-alpha.6/bootstrap-tooltip-custom-class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
1 change: 0 additions & 1 deletion ...trap4/bootstrap-tooltip-custom-class.scss → ...pha.6/bootstrap-tooltip-custom-class.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,3 @@ $tooltip-danger-bg: $brand-danger !default;
.tooltip-danger {
@include tooltip-custom($tooltip-danger-bg);
}

4 changes: 2 additions & 2 deletions bootstrap4/example.html → bootstrap-v4.0.0-alpha.6/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html >
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 Tooltip Custom Classes</title>
<title>Bootstrap v4.0.0-alpha.6 Tooltip Custom Classes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
Expand Down Expand Up @@ -133,7 +133,7 @@ <h3 class="bs-example__title">Dinamic examples</h3>

<button class="btn btn-custom" data-toggle="tooltip" data-placement="bottom" title="Custom tooltip example">Custom tooltip</button>

<button class="btn btn-custom-alt" data-toggle="tooltip" data-placement="bottom" title="Another custom tooltip example">Another custom tooltip</button>
<button class="btn btn-custom-alt" data-toggle="tooltip" data-placement="bottom" title="Another custom tooltip">Another custom tooltip</button>

</div>

Expand Down
79 changes: 79 additions & 0 deletions bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
36 changes: 36 additions & 0 deletions bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
91 changes: 91 additions & 0 deletions bootstrap-v4.0.0-beta/bootstrap-tooltip-custom-class.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}

Loading