Support Popper positions

[mdo]

Replacement issue for #17759 and #19921. Would be rad to tackle this for a v4.1 or v4.2 release.

Also includes dropdowns now: #21510.

• Tooltips
• Popovers
• Dropdown

/cc @Johann-S

[pat270]

Can we get more dropdown-menu positions as well?

[Acts7]

Bootstrap 4's dropdown placement options currently mirror the "basic" positioning for popper.
EXCEPT:
position: 'bottom'.
Why was that left off and how can we get that replaced?

// approx line 48
var ClassName = {
....
//add this line:
MENUCENTER: 'dropdown-menu-center',  // add new css class for center align dropdown
....
};

// approx line 65
var AttachmentMap = {
....
//add this line:
BOTTOMCENTER: 'bottom',    // 'bottom' already exists in popper.js. this just maps to that placement.
....
};

// approx 227
_proto._getPlacement = function _getPlacement() {
  ....
//add these 3 lines
  } else if ($(this._menu).hasClass(ClassName.MENUCENTER)) {
    placement = AttachmentMap.BOTTOMCENTER;
  }
 ....
  return placement;
};

[itsjavi]

Popper supports placement variations using -end and -start, e.g.: bottom-end (which means bottom left alignment).

Is this issue going to address that problem? It seems that it is not supported via de BS popover options (I am using the 4.1.2 bundle JS).

[kikonen]

Just hit this "-start" & "-end" problem with bootstrap 4.3.1. I would need to definitely be able to use "top-start" alignment for some tooltips, but bootstrap tooltip.js explicitly forbids that.

So I'm pondering what kind of workaround would solve the problem.

Found workaround, just overriding placement resolver from "Tooltip class"

var AttachmentMap = {
  AUTO: 'auto',
  TOP: 'top',
  RIGHT: 'right',
  BOTTOM: 'bottom',
  LEFT: 'left',
  'TOP-START': 'top-start'
};

window.Tooltip.prototype._getAttachment = function(placement) {
  return AttachmentMap[placement.toUpperCase()];
};

[Jule-]

Still opened...

My little 2cts workaround, include/execute after bootstrap.js is loaded:

;(function () {
  // Fix Bootstrap caveat regarding to Poppers.js placement capabilities
  // Allow overriding Dropdown placement with 'data-placement' attribute
  var original_getPlacement = bootstrap.Dropdown.prototype._getPlacement
  bootstrap.Dropdown.prototype._getPlacement = function () {
    return $(this._menu).data('placement') || original_getPlacement()
  }
})()

then for example:

<div className="dropdown-menu" data-placement="bottom">
  ...
</div>

[tszalbot]

+1

[transfer1992]

Still opened...

My little 2cts workaround, include/execute after bootstrap.js is loaded:

;(function () {
  // Fix Bootstrap caveat regarding to Poppers.js placement capabilities
  // Allow overriding Dropdown placement with 'data-placement' attribute
  var original_getPlacement = bootstrap.Dropdown.prototype._getPlacement
  bootstrap.Dropdown.prototype._getPlacement = function () {
    return $(this._menu).data('placement') || original_getPlacement()
  }
})()

then for example:

<div className="dropdown-menu" data-placement="bottom">
  ...
</div>

That worked for me! Thanks!

[adrianoresende]

Why in 5 version don't have class dropdown-menu-center to simplify?

[mc-caprice]

Why are all the other issues closed regarding this? I was hoping to use this as a closed issue means problem solved?

[mdo]

Added center dropdown and dropup variations in #35893, so going to close this out. I don't see us adding every single option at this point, but if someone does want to go the extra length to try it out for us, I'm down to review a PR :).