All Questions
246
questions
0
votes
2
answers
31
views
How to stop mouse events through CSS ::backdrop
I'm exploring replacing some JavaScript modals with native HTML and CSS only modals using the new Popover API and I've noticed that pointer-events like hover and click are propagating through to the ...
- 5,347
1
vote
1
answer
36
views
Popover on Table Cell Depending on the Value
I am currently developing a website (with Flask) that features a data table containing abbreviated codes for some values. My goal is to have a popover on these cells to have the full meaning in the ...
- 73
0
votes
1
answer
83
views
Bootstrap 5 popover html content
I am using Bootstrap 5 popover and it could not show the HTML content that I need.
I followed this link as a solution:
How to add html tag attribute in bootstrap 5 popover setAttribute()?
It was ...
- 23
0
votes
2
answers
58
views
same html popover on different elements positioned in different places
I have a dropdown that I wish to show/hide using html popover API under many different elements. The problem is that popover uses id to detect the target, obviously I can't use one id on multiple ...
0
votes
0
answers
59
views
data popover not showing up in modal
I have the following popover buttons in multiple areas of my pages. With onmouseenter and onmouseleave the popover is working just fine placing the info/tip popover next to the button/icon that was ...
- 3,038
1
vote
0
answers
157
views
Close popover with HTML & popover api only?
I'm working with the new HTML Popover API and I was wondering if there was an HTML solution to closing the popover when clicking on one of the anchor elements inside the popover?
<button ...
- 23
2
votes
2
answers
2k
views
How to position a popover in css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
#products-list:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
margin: 0;
}
...
- 1,519
0
votes
1
answer
161
views
Popover API: Event bubbling not working on beforetoggle event?
Background
Referencing the MDN documentation on Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API (not to be confused with Bootstrap's popover).
I have multiple popovers, ...
- 313
-1
votes
1
answer
53
views
CSS make an absolutely positioned HTML element opaque without setting background color
I have HTML that looks like this:
<html>
<head>
<style>
.globalpopup {
margin: 0px;
padding: 2px;
position: absolute;
opacity: 1;
background: inherit;
}
</style>
</...
- 42.5k
2
votes
1
answer
375
views
How can I check if a html popover is open?
With the new popover API, is there a way to check with JavaScript if the popover is currently open?
<button popovertarget="pop">Trigger the popover</button>
<div popover id="pop">...
- 1,229
1
vote
1
answer
134
views
popoverTargetElement does not cross shadow boundaries
The new Popover API, when used declaratively, does not work across shadow boundaries. This is a limitation when creating reusable web components that encapsulate some logic and also use a popover ...
- 1,229
1
vote
0
answers
37
views
How to use popover with React.js [duplicate]
I am Trying to use HTML popover with React & typescript
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
function AlertWindow() {
return (
<>
<...
1
vote
1
answer
172
views
Popover API: How to stop the popover from closing
When using the popover API, I would like to, when light dismiss occurs, stop the popover from closing, and run custom js to remove the popover from the screen.
Is there a way to do this?
I tried to do ...
0
votes
1
answer
1k
views
CSS transition animation not working for popover attribute
While testing the new popover attribute, I tried to apply a transition for toggling it. This does not seem to work. Is this by design or is it a bug? The opacity is applied, but the transition is not ...
- 1,229
0
votes
1
answer
42
views
How to make clickable popover disappear if I clicked outside of it
I have this popover contain some info and URL to another page so when I clicked on it it's open, but when I click outside of it it won't disappear,
`<i class="bi bi-question-circle text-...
- 50