rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Placement auto for popovers

Browse Source
This commit is contained in:
Johann-S 2017-05-24 14:09:36 +02:00
parent 2c72af88ee
commit 4c3b6c5ceb
3 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/popover.js
View File

@ -23,7 +23,7 @@ const Popover = (($) => {
const EVENT_KEY = `.${DATA_KEY}` const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME] const JQUERY_NO_CONFLICT = $.fn[NAME]
const CLASS_PREFIX = 'bs-popover' const CLASS_PREFIX = 'bs-popover'
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
const Default = $.extend({}, Tooltip.Default, { const Default = $.extend({}, Tooltip.Default, {
placement : 'right', placement : 'right',

4
js/tests/visual/popover.html
View File

@ -10,6 +10,10 @@
<div class="container"> <div class="container">
<h1>Popover <small>Bootstrap Visual Test</small></h1> <h1>Popover <small>Bootstrap Visual Test</small></h1>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on auto
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place"> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place">
Popover on top Popover on top
</button> </button>

14
scss/_popover.scss
View File

@ -156,6 +156,20 @@
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
} }
&.bs-popover-auto {
&[x-placement^="top"] {
@extend .bs-popover-top;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
}
&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
}
}
} }