Skip to content

B
bootstrap
Commit a58febf7 authored by fat's avatar fat
Browse files
Options

popover passing as well

parent 3452e8dc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 724 additions and 1029 deletions
Gruntfile.js
View file @ a58febf7
......@@ -72,7 +72,8 @@ module.exports = function (grunt) {
'js/dist/modal.js' : 'js/src/modal.js',
'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
'js/dist/tab.js' : 'js/src/tab.js',
'js/dist/tooltip.js' : 'js/src/tooltip.js'
'js/dist/tooltip.js' : 'js/src/tooltip.js',
'js/dist/popover.js' : 'js/src/popover.js'
}
}
},
......
dist/css/bootstrap.css
View file @ a58febf7
......@@ -3995,7 +3995,7 @@ button.close {
top: 0;
left: 0;
z-index: 1060;
display: none;
display: block;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
......@@ -4008,98 +4008,102 @@ button.close {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem; }
.popover-top {
.popover.popover-top,
.popover.bs-tether-element-attached-bottom {
margin-top: -10px; }
.popover-right {
margin-left: 10px; }
.popover-bottom {
margin-top: 10px; }
.popover-left {
margin-left: -10px; }
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: -0.7rem -0.7rem 0 0; }
.popover-content {
padding: 9px 14px; }
.popover-arrow,
.popover-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid; }
.popover-arrow {
border-width: 11px; }
.popover-arrow:after {
content: "";
border-width: 10px; }
.popover-top > .popover-arrow {
.popover.popover-top .popover-arrow,
.popover.bs-tether-element-attached-bottom .popover-arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: rgba(0, 0, 0, 0.25);
border-bottom-width: 0; }
.popover-top > .popover-arrow:after {
.popover.popover-top .popover-arrow:after,
.popover.bs-tether-element-attached-bottom .popover-arrow:after {
bottom: 1px;
margin-left: -10px;
content: "";
border-top-color: #fff;
border-bottom-width: 0; }
.popover-right > .popover-arrow {
.popover.popover-right,
.popover.bs-tether-element-attached-left {
margin-left: 10px; }
.popover.popover-right .popover-arrow,
.popover.bs-tether-element-attached-left .popover-arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: rgba(0, 0, 0, 0.25);
border-left-width: 0; }
.popover-right > .popover-arrow:after {
.popover.popover-right .popover-arrow:after,
.popover.bs-tether-element-attached-left .popover-arrow:after {
bottom: -10px;
left: 1px;
content: "";
border-right-color: #fff;
border-left-width: 0; }
.popover-bottom > .popover-arrow {
.popover.popover-bottom,
.popover.bs-tether-element-attached-top {
margin-top: 10px; }
.popover.popover-bottom .popover-arrow,
.popover.bs-tether-element-attached-top .popover-arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: rgba(0, 0, 0, 0.25); }
.popover-bottom > .popover-arrow:after {
.popover.popover-bottom .popover-arrow:after,
.popover.bs-tether-element-attached-top .popover-arrow:after {
top: 1px;
margin-left: -10px;
content: "";
border-top-width: 0;
border-bottom-color: #fff; }
.popover-left > .popover-arrow {
.popover.popover-left,
.popover.bs-tether-element-attached-right {
margin-left: -10px; }
.popover.popover-left .popover-arrow,
.popover.bs-tether-element-attached-right .popover-arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: rgba(0, 0, 0, 0.25); }
.popover-left > .popover-arrow:after {
.popover.popover-left .popover-arrow:after,
.popover.bs-tether-element-attached-right .popover-arrow:after {
right: 1px;
bottom: -10px;
content: "";
border-right-width: 0;
border-left-color: #fff; }
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: -0.7rem -0.7rem 0 0; }
.popover-content {
padding: 9px 14px; }
.popover-arrow,
.popover-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid; }
.popover-arrow {
border-width: 11px; }
.popover-arrow:after {
content: "";
border-width: 10px; }
.carousel {
position: relative; }
......
dist/css/bootstrap.css.map
View file @ a58febf7
This diff was suppressed by a .gitattributes entry.
js/dist/popover.js 0 → 100644
View file @ a58febf7
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
var Popover = (function ($) {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
var NAME = 'popover';
var VERSION = '4.0.0';
var DATA_KEY = 'bs.popover';
var JQUERY_NO_CONFLICT = $.fn[NAME];
var Default = $.extend({}, Tooltip.Default, {
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip">' + '<div class="popover-arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>'
});
var ClassName = {
FADE: 'fade',
IN: 'in'
};
var Selector = {
TITLE: '.popover-title',
CONTENT: '.popover-content',
ARROW: '.popover-arrow'
};
var Event = {
HIDE: 'hide.bs.popover',
HIDDEN: 'hidden.bs.popover',
SHOW: 'show.bs.popover',
SHOWN: 'shown.bs.popover',
INSERTED: 'inserted.bs.popover',
CLICK: 'click.bs.popover',
FOCUSIN: 'focusin.bs.popover',
FOCUSOUT: 'focusout.bs.popover',
MOUSEENTER: 'mouseenter.bs.popover',
MOUSELEAVE: 'mouseleave.bs.popover'
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Popover = (function (_Tooltip) {
function Popover() {
_classCallCheck(this, Popover);
if (_Tooltip != null) {
_Tooltip.apply(this, arguments);
}
}
_inherits(Popover, _Tooltip);
_createClass(Popover, [{
key: 'isWithContent',
// overrides
value: function isWithContent() {
return this.getTitle() || this._getContent();
}
}, {
key: 'getTipElement',
value: function getTipElement() {
return this.tip = this.tip || $(this.config['template'])[0];
}
}, {
key: 'setContent',
value: function setContent() {
var tip = this.getTipElement();
var title = this.getTitle();
var content = this._getContent();
var titleElement = $(tip).find(Selector.TITLE)[0];
if (titleElement) {
titleElement[this.config.html ? 'innerHTML' : 'innerText'] = title;
}
// we use append for html objects to maintain js events
$(tip).find(Selector.CONTENT).children().detach().end()[this.config.html ? typeof content === 'string' ? 'html' : 'append' : 'text'](content);
$(tip).removeClass(ClassName.FADE).removeClass(ClassName.IN);
this.cleanupTether();
}
}, {
key: '_getContent',
// private
value: function _getContent() {
return this.element.getAttribute('data-content') || (typeof this.config.content == 'function' ? this.config.content.call(this.element) : this.config.content);
}
}], [{
key: 'VERSION',
// getters
get: function () {
return VERSION;
}
}, {
key: 'Default',
get: function () {
return Default;
}
}, {
key: 'NAME',
get: function () {
return NAME;
}
}, {
key: 'DATA_KEY',
get: function () {
return DATA_KEY;
}
}, {
key: 'Event',
get: function () {
return Event;
}
}, {
key: '_jQueryInterface',
// static
value: function _jQueryInterface(config) {
return this.each(function () {
var data = $(this).data(DATA_KEY);
var _config = typeof config === 'object' ? config : null;
if (!data && /destroy|hide/.test(config)) {
return;
}
if (!data) {
data = new Popover(this, _config);
$(this).data(DATA_KEY, data);
}
if (typeof config === 'string') {
data[config]();
}
});
}
}]);
return Popover;
})(Tooltip);
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Popover._jQueryInterface;
$.fn[NAME].Constructor = Popover;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Popover._jQueryInterface;
};
return Popover;
})(jQuery);
//# sourceMappingURL=popover.js.map
\ No newline at end of file
js/dist/popover.js.map 0 → 100644
View file @ a58febf7
This diff was suppressed by a .gitattributes entry.
js/dist/scrollspy.js
View file @ a58febf7
......@@ -57,7 +57,7 @@ var ScrollSpy = (function ($) {
_classCallCheck(this, ScrollSpy);
this._scrollElement = element.tagName === 'BODY' ? window : element;
this._config = $.extend({}, Defaults, config);
this._config = $.extend({}, Default, config);
this._selector = '' + (this._config.target || '') + ' .nav li > a';
this._offsets = [];
this._targets = [];
......
js/dist/scrollspy.js.map
View file @ a58febf7
This diff was suppressed by a .gitattributes entry.
js/dist/tooltip.js
View file @ a58febf7
This diff is collapsed.
js/dist/tooltip.js.map
View file @ a58febf7
This diff was suppressed by a .gitattributes entry.
js/popover.js deleted 100644 → 0
View file @ 3452e8dc
/* ========================================================================
* Bootstrap: popover.js v3.3.4
* http://getbootstrap.com/javascript/#popovers
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// POPOVER PUBLIC CLASS DEFINITION
// ===============================
var Popover = function (element, options) {
this.init('popover', element, options)
}
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
Popover.VERSION = '3.3.4'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})
// NOTE: POPOVER EXTENDS tooltip.js
// ================================
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
Popover.prototype.constructor = Popover
Popover.prototype.getDefaults = function () {
return Popover.DEFAULTS
}
Popover.prototype.setContent = function () {
var $tip = this.tip()
var title = this.getTitle()
var content = this.getContent()
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content').children().detach().end()[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content)
$tip.removeClass('fade top bottom left right in')
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
}
Popover.prototype.hasContent = function () {
return this.getTitle() || this.getContent()
}
Popover.prototype.getContent = function () {
var $e = this.$element
var o = this.options
return $e.attr('data-content')
|| (typeof o.content == 'function' ?
o.content.call($e[0]) :
o.content)
}
Popover.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
}
// POPOVER PLUGIN DEFINITION
// =========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.popover
$.fn.popover = Plugin
$.fn.popover.Constructor = Popover
// POPOVER NO CONFLICT
// ===================
$.fn.popover.noConflict = function () {
$.fn.popover = old
return this
}
}(jQuery);
js/src/popover.js 0 → 100644
View file @ a58febf7
import Tooltip from './tooltip'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const Popover = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'popover'
const VERSION = '4.0.0'
const DATA_KEY = 'bs.popover'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = $.extend({}, Tooltip.Default, {
placement : 'right',
trigger : 'click',
content : '',
template : '<div class="popover" role="tooltip">'
+ '<div class="popover-arrow"></div>'
+ '<h3 class="popover-title"></h3>'
+ '<div class="popover-content"></div></div>'
})
const ClassName = {
FADE : 'fade',
IN : 'in'
}
const Selector = {
TITLE : '.popover-title',
CONTENT : '.popover-content',
ARROW : '.popover-arrow'
}
const Event = {
HIDE : 'hide.bs.popover',
HIDDEN : 'hidden.bs.popover',
SHOW : 'show.bs.popover',
SHOWN : 'shown.bs.popover',
INSERTED : 'inserted.bs.popover',
CLICK : 'click.bs.popover',
FOCUSIN : 'focusin.bs.popover',
FOCUSOUT : 'focusout.bs.popover',
MOUSEENTER : 'mouseenter.bs.popover',
MOUSELEAVE : 'mouseleave.bs.popover'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Popover extends Tooltip {
// getters
static get VERSION() {
return VERSION
}
static get Default() {
return Default
}
static get NAME() {
return NAME
}
static get DATA_KEY() {
return DATA_KEY
}
static get Event() {
return Event
}
// overrides
isWithContent() {
return this.getTitle() || this._getContent()
}
getTipElement() {
return (this.tip = this.tip || $(this.config.template)[0])
}
setContent() {
let tip = this.getTipElement()
let title = this.getTitle()
let content = this._getContent()
let titleElement = $(tip).find(Selector.TITLE)[0]
if (titleElement) {
titleElement[
this.config.html ? 'innerHTML' : 'innerText'
] = title
}
// we use append for html objects to maintain js events
$(tip).find(Selector.CONTENT).children().detach().end()[
this.config.html ?
(typeof content === 'string' ? 'html' : 'append') : 'text'
](content)
$(tip)
.removeClass(ClassName.FADE)
.removeClass(ClassName.IN)
this.cleanupTether()
}
// private
_getContent() {
return this.element.getAttribute('data-content')
|| (typeof this.config.content == 'function' ?
this.config.content.call(this.element) :
this.config.content)
}
// static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
let _config = typeof config === 'object' ? config : null
if (!data && /destroy|hide/.test(config)) {
return
}
if (!data) {
data = new Popover(this, _config)
$(this).data(DATA_KEY, data)
}
if (typeof config === 'string') {
data[config]()
}
})
}
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Popover._jQueryInterface
$.fn[NAME].Constructor = Popover
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Popover._jQueryInterface
}
return Popover
})(jQuery)
export default Popover
js/src/scrollspy.js
View file @ a58febf7
......@@ -55,7 +55,7 @@ const ScrollSpy = (($) => {
constructor(element, config) {
this._scrollElement = element.tagName === 'BODY' ? window : element
this._config = $.extend({}, Defaults, config)
this._config = $.extend({}, Default, config)
this._selector = `${this._config.target || ''} .nav li > a`
this._offsets = []
this._targets = []
......
js/src/tooltip.js
View file @ a58febf7
This diff is collapsed.
js/tests/index.html
View file @ a58febf7
......@@ -141,11 +141,9 @@
<script src="../../js/dist/scrollspy.js"></script>
<script src="../../js/dist/tab.js"></script>
<script src="../../js/dist/tooltip.js"></script>
<script src="../../js/dist/popover.js"></script>
<!-- Old Plugin sources -->
<!-- <script src="../../js/popover.js"></script> -->
<!-- Unit tests
<!-- Unit tests -->
<script src="unit/alert.js"></script>
<script src="unit/button.js"></script>
<script src="unit/carousel.js"></script>
......@@ -153,9 +151,9 @@
<script src="unit/dropdown.js"></script>
<script src="unit/modal.js"></script>
<script src="unit/scrollspy.js"></script>
<script src="unit/tab.js"></script> -->
<script src="unit/tab.js"></script>
<script src="unit/tooltip.js"></script>
<!-- <script src="unit/popover.js"></script> -->
<script src="unit/popover.js"></script>
</head>
<body>
......
js/tests/unit/popover.js
View file @ a58febf7
......@@ -16,6 +16,7 @@ $(function () {
afterEach: function () {
$.fn.popover = $.fn.bootstrapPopover
delete $.fn.bootstrapPopover
$('.popover').remove()
}
})
......@@ -81,6 +82,7 @@ $(function () {
assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
$popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
})
......@@ -91,6 +93,7 @@ $(function () {
var $popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
html: true,
content: function () {
return $div
}
......@@ -98,14 +101,14 @@ $(function () {
$popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
$popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
$popover.bootstrapPopover('show')
assert.notEqual($('.popover').length, 0, 'popover was inserted')
assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
$popover.bootstrapPopover('hide')
assert.strictEqual($('.popover').length, 0, 'popover was removed')
......@@ -126,7 +129,6 @@ $(function () {
assert.strictEqual($('.popover').length, 0, 'popover was removed')
})
QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) {
assert.expect(4)
var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
......@@ -240,13 +242,6 @@ $(function () {
.bootstrapPopover('show')
})
QUnit.test('should throw an error when initializing popover on the document object without specifying a delegation selector', function (assert) {
assert.expect(1)
assert.throws(function () {
$(document).bootstrapPopover({ title: 'What am I on?', content: 'My selector is missing' })
}, new Error('`selector` option must be specified when initializing popover on the window.document object!'))
})
QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) {
assert.expect(1)
......@@ -259,16 +254,6 @@ $(function () {
assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover')
})
QUnit.test('should throw an error when template contains multiple top-level elements', function (assert) {
assert.expect(1)
assert.throws(function () {
$('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
.appendTo('#qunit-fixture')
.bootstrapPopover({ template: '<div>Foo</div><div>Bar</div>' })
.bootstrapPopover('show')
}, new Error('popover `template` option must consist of exactly 1 top-level element!'))
})
QUnit.test('should fire inserted event', function (assert) {
assert.expect(2)
var done = assert.async()
......
js/tests/unit/tooltip.js
View file @ a58febf7
......@@ -89,11 +89,11 @@ $(function () {
assert.strictEqual(id.indexOf('tooltip'), 0, 'tooltip id has prefix')
})
QUnit.test('should place tooltips relative to attachment option', function (assert) {
QUnit.test('should place tooltips relative to placement option', function (assert) {
assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ attachment: 'bottom' })
.bootstrapTooltip({ placement: 'bottom' })
$tooltip.bootstrapTooltip('show')
......@@ -321,7 +321,7 @@ $(function () {
var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
.appendTo($container)
.bootstrapTooltip({
attachment: 'right',
placement: 'right',
})
.bootstrapTooltip('show')
......@@ -389,7 +389,7 @@ $(function () {
.one('show.bs.tooltip', function () {
$(this).remove()
})
.bootstrapTooltip({ attachment: 'top' })
.bootstrapTooltip({ placement: 'top' })
try {
$tooltip.bootstrapTooltip('show')
......@@ -426,7 +426,7 @@ $(function () {
.find('a')
.css('margin-top', 200)
.bootstrapTooltip({
attachment: 'top',
placement: 'top',
animate: false
})
.bootstrapTooltip('show')
......@@ -609,7 +609,7 @@ $(function () {
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
done()
})
.bootstrapTooltip({ attachment: 'top', trigger: 'manual' })
.bootstrapTooltip({ placement: 'top', trigger: 'manual' })
$circle.bootstrapTooltip('show')
})
......@@ -621,7 +621,7 @@ $(function () {
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-attachment="top">some text</span>')
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
.appendTo('#qunit-fixture')
$tooltip.bootstrapTooltip({
......@@ -649,7 +649,7 @@ $(function () {
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-attachment="top">some text</span>')
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
.appendTo('#qunit-fixture')
$tooltip.bootstrapTooltip({
......
js/tests/visual/popover.html
View file @ a58febf7
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popover</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../dist/css/bootstrap.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
......@@ -39,9 +39,11 @@
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../tooltip.js"></script>
<script src="../../popover.js"></script>
<script src="../vendor/tether.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/tooltip.js"></script>
<script src="../../dist/popover.js"></script>
<!-- JavaScript Test -->
<script>
......
js/tooltip.js deleted 100644 → 0
View file @ 3452e8dc
This diff is collapsed.
scss/_popover.scss
View file @ a58febf7
......@@ -8,7 +8,7 @@
top: 0;
left: 0;
z-index: $zindex-popover;
display: none;
display: block;
max-width: $popover-max-width;
padding: 1px;
// Reset font and text properties given new insertion method
......@@ -24,52 +24,15 @@
border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
}
// Offset the popover to account for the popover arrow
.popover-top { margin-top: -$popover-arrow-width; }
.popover-right { margin-left: $popover-arrow-width; }
.popover-bottom { margin-top: $popover-arrow-width; }
.popover-left { margin-left: -$popover-arrow-width; }
.popover-title {
padding: 8px 14px;
margin: 0; // reset heading margin
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
@include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .popover-arrow is outer, .popover-arrow:after is inner
// Popover directions
.popover-arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover-arrow {
border-width: $popover-arrow-outer-width;
}
.popover-arrow:after {
content: "";
border-width: $popover-arrow-width;
}
&.popover-top,
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
.popover-top > .popover-arrow {
.popover-arrow {
bottom: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
......@@ -82,8 +45,14 @@
border-top-color: $popover-arrow-color;
border-bottom-width: 0;
}
}
.popover-right > .popover-arrow {
}
}
&.popover-right,
&.bs-tether-element-attached-left {
margin-left: $popover-arrow-width;
.popover-arrow {
top: 50%;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
......@@ -96,8 +65,14 @@
border-right-color: $popover-arrow-color;
border-left-width: 0;
}
}
.popover-bottom > .popover-arrow {
}
}
&.popover-bottom,
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width;
.popover-arrow {
top: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
......@@ -110,9 +85,14 @@
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
}
}
}
.popover-left > .popover-arrow {
&.popover-left,
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
.popover-arrow {
top: 50%;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
......@@ -125,4 +105,46 @@
border-right-width: 0;
border-left-color: $popover-arrow-color;
}
}
}
}
// Offset the popover to account for the popover arrow
.popover-title {
padding: 8px 14px;
margin: 0; // reset heading margin
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
@include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .popover-arrow is outer, .popover-arrow:after is inner
.popover-arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover-arrow {
border-width: $popover-arrow-outer-width;
}
.popover-arrow:after {
content: "";
border-width: $popover-arrow-width;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment