Popper.js is a javascript library, consider also adding the Javascript tag. Popper.js used in web applications to position poppers, an element on the screen which "pops out" from the natural flow like tooltips, popovers, drop-downs. With no dependencies, no jQuery, no LoDash, it's used by Twitter in Bootstrap v4, Microsoft in WebClipper, and Atlassian in AtlasKit.
Questions tagged [popper.js]
380 questions
14
votes
2 answers
Allow popper to go outside the boundaries of the container
I am using popper.js on the items in a custom-built dropdown menu (it's not a
Josh Withee
- 9,922
- 3
- 44
- 62
14
votes
9 answers
Not able to install bootstrap 4 (beta) nuget package to .Net MVC (.Net version 4.6.2)
I am not able to install bootstrap 4(beta) to my MVC project. To be precise popper.js nuget dependency is failing to install. Please let me know any possible way to do it(bower install is still a way but I want to go with nuget)
Could not install…
Debananda
- 476
- 1
- 6
- 17
13
votes
4 answers
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items.
Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this?
I always want…
Vishwas
- 1,398
- 8
- 20
- 33
11
votes
2 answers
How to initialize Tooltips in Bootstrap 4 with pure JavaScript? No jQuery
I'm somehow stuck with this code:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
I'd like to change it to pure JavaScript. I'm not sure how to call the tooltip function, I already have some ideas like:
var tooltips =…
Federico Navarrete
- 3,069
- 5
- 41
- 76
11
votes
3 answers
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
When I place the command npm update for an existing React project, this is displayed:
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN optional SKIPPING…
zouhair zouita
- 145
- 2
- 2
- 7
11
votes
1 answer
How to give popper.js popper-box margin/ padding so it wont stick to the window borders
I want to give a popper-box (tooltip) a padding to the window. So it has an offset to the window frame and does not stick at the edges
I tried to achieve this by adding a padding/ margin/ transparent border to the popper-box. But all of these…
user2061683
- 271
- 2
- 7
9
votes
0 answers
Popper.js: how to set position fixed strategy with modifiers?
I'm trying to implement a context menu using BlueprintJs Popover component; that uses Popper.js to position the popover, under the hood.
The problemis that: I have fixed elements and absolutely positioned elements (with transform css property set to…
Istvan Szasz
- 1,307
- 17
- 31
9
votes
2 answers
Styling a tooltip (popper.js / bootstrap v4 beta)
I've installed bootstrap v4 beta and with it the popper.js (tooltip.js) library. I'm trying to use it's tooltip function. So I managed to make it appear but I can't change it's appearance/style for the life of me. I've looked over their…
Alin Faur
- 1,091
- 2
- 9
- 10
8
votes
3 answers
Rails 6 failing to deploy to Heroku: ModuleNotFoundError: Module not found: Error: Can't resolve '@popperjs/core' in '/tmp
I am trying to deploy my rails 6 blog-like app to Heroku and since I've added Bootstrap to do some styling I haven't been able to compile and push anymore. This is the message I am getting:
ModuleNotFoundError: Module not found: Error: Can't resolve…
parK-dev
- 81
- 1
- 3
8
votes
2 answers
react-popper incorrect position on mount
I have built a custom tree view in React, and each item contains a dropdown which is positioned using Popper. Since the child elements are not visible on render, Popper is not positioning the dropdown correctly, for example:
When the tree is open…
BenM
- 52,573
- 26
- 113
- 168
8
votes
3 answers
React Date Picker is Being Hidden Behind Overflow Parent (popover fixed placement issue)
I'm trying to have the date selection popover from react datepicker to open from a material UI menu item.
I have made my menu item the react datepicker input field. The issue is that my input field is the anchor for the selection date popover and…
Vincent
- 129
- 1
- 3
- 7
8
votes
3 answers
bootstrap.min.js:6 Uncaught TypeError: n is not a constructor returning when I click on the dropdown button
I have multiple dropdown menus in my page. Located inside the nav works fine, but the inside of the page does not work
Located inside the nav
inside of the page
what is the problem?
Thank you.
starlings
- 411
- 6
- 12
8
votes
3 answers
How do I offset Material-UI Popper (popper.js library) position on y-axis?
I am using a material-ui (v 4.9.5) Popper for a "pop-out" menu as above. It's anchorElement is the selected ListItem on the left.
I want the Popper to appear flush with the top of the main menu. However it appears 5px short.
If I look at the…
Simon Long
- 1,310
- 4
- 20
- 39
8
votes
4 answers
React Fullcalendar v4 tooltip
Fullcalendar React component:
import FullCalendar from "@fullcalendar/react";
import timeGrid from "@fullcalendar/resource-timegrid";
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
class FC extends React.Component {
…
ramamoorthy_villi
- 1,939
- 1
- 17
- 40
8
votes
3 answers
Bootstrap's tooltips require Popper.js
I use Bootstrap 4 and Jquery-3.3.1 in my project.
I use js as follows: