Questions tagged [popper.js]

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.

380 questions
0
votes
0 answers

Setting Floating UI shift on multiple elements

I want to use Floating UI to prevent dropdown menus from going off the left/right edge of the screen. The example code is as follows: HTML:
0
votes
0 answers

Tippyjs initial placement is wrong

I'm using tippy to create responsive (position-aware) dropdowns. I have the following options: tippy(this.inputEl, { content: this.dropdown, allowHtml: true, trigger: 'manual', ..., placement: 'bottom-start', popperOptions: { …
Motassem Jalal
  • 1,254
  • 1
  • 22
  • 46
0
votes
0 answers

how to create a Popover dynamically for each rendered item

I'm trying to create a popover dynamically for all my to be rendered elements. However the method from this post only outputs the following error message: "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'." In…
PhilippT
  • 23
  • 5
0
votes
1 answer

Why is createPopper not a function even though I'm including Popper?

I have a navbar dropdown in my header and one in the body of my page. Currently, the navbar dropdown works. However, when I click on the icon that I've set to trigger the other dropdown, nothing happens. Navbar dropdown:
0
votes
1 answer

How prevent change popper placement with scroll?

I want to fix the popper element's position and not change the placement with later updates (without disabling the scroll listener). The gif shows you my sticky popper, but I want it to be static. (don't change position on scroll):
Mohsen
  • 1,415
  • 1
  • 13
  • 26
0
votes
1 answer

Use grails-asset-pipeline to compile bootstrap 5 from source

I'm trying to figure out how to compile the latest bootstrap (v5.0.2) from source so I can more easily customize the theme using SASS variables for a grail (v5.2.3) app using the grails asset-pipeline. I've been able to get the .scss to compile and…
Bioman
  • 1
  • 3
0
votes
2 answers

Laravel 9 $(...).tooltip is not a function

I'm using a fresh installation of Laravel Framework 9.43.0. Bootstrap and jQuery are working fine, except voor tooltip(). It's giving me this error: Uncaught TypeError: $(...).tooltip is not a function I tried a lot of different combinations of…
Roel Jansen
  • 306
  • 2
  • 11
0
votes
0 answers

Using visual studio VB MVC and the dropdown menu is visible but not working

I am new to MVC and not sure what is going wrong here, but I feel it has something to do with popper.js and bootstrap. Everything looks good when I debug it, except the dropdown menu actually does not work. I assume I am not loading the scripts…
0
votes
0 answers

how to show text suggestion poppoer in content editable

I want to show a popper based on caret position like this I have tried with tippy js with popper js configuration but this did not work.i need to show a dynamic popper based on caret position which position will be changed while typing.
0
votes
0 answers

Rails 7, Bootstrap 5.2. Dropdown component doesn't work

I try to add dropdown navbar component from bootstrap in my application. But it doesn't work. It is the item navbar:
0
votes
1 answer

Tippy.js popperInstance not working in v6

I am using Tippy and Popper for a Cytoscape tooltip. I based my code off of this demo which seems to be made for Tippy v5 and won't work in tippy v6. Specifically, the instance.popperInstance is always null. I have read this migration guide which…
Jahill
  • 78
  • 1
  • 7
0
votes
1 answer

MUI Popper Component with Props keeps closing component on re-render

I am curious how to architect a component leveraging MUI's Popover component when there are dynamic props getting passed to a controlled Slider component inside of the Popover component — as well as the anchor element also getting dynamically…
0
votes
1 answer

Dismiss Material UI Popper after a few seconds automatically

I want this popper to show when the "copy link" button is clicked to let the user know that it has been copied, but then disappear on its own after a second or two. Here is the code for the popper import * as React from 'react'; import Box from…
Colin S
  • 123
  • 7
0
votes
1 answer

Shared Popper requires two clicks to reopen

I've got buttons that represent sports. When a user clicks on a button a Popper is opened with the sport's associated component/content. The same Popper is shared between all the buttons. This works fine, but once the Popper is open it requires two…
PhoenixDown
  • 23
  • 1
  • 6
0
votes
1 answer

why doesn't placement of floating-ui work?

I've read floating-ui doc but there are some methods that I really cant understand such as getElementRects, getClippingRect and getDimensions, I tried to learn then by trail and error but I still haven't figured them out how to work with them, here…
Kourosh
  • 917
  • 1
  • 11
  • 24