HTML Form Won't Display in Bootstrap Popover

Question

I'm trying to use a Bootstrap (v5.3.3) popover to display a basic search form.

Here's the HTML:

<li class="nav-item"><a id="searchLink" class="nav-link" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-content='<form><input class="form-control" type="text" name="search" /></form>'><i class="fa-solid fa-magnifying-glass"></i></a></li>

And here's the javascript:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

Is there a reason why the form won't display? The popover is blank. But if I replace it with basic HTML tags and text -- it works properly.

Or should I be using a different method to display a popup search form in Bootstrap? I don't want it to display in a modal.

eddykent · Accepted Answer · 2025-05-20 22:15:45Z

0

Without more information/context it is hard to diagnose what is going on. From the top of my head, two things might be happening:

Is your popovers ever triggered? I see many attributes but no trigger for the popovers to fire.
Is the popover generation code in a document-ready function? If not it could be rendering before the DOM is loaded.
(experimental) What happens if you put some plain text into the popover content?

Hope this helps!

answered May 20 at 22:15

eddykent

586 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathew Smith May 20 at 22:43

1. Yes. The popover displays -- but it's blank. No form/input field. 2. Everything I'm doing is in the two snippets above. 3. Plain text -- even with HTML tags -- will display.

Mathew Smith · Accepted Answer · 2025-05-21 17:47:45Z

0

Got it worked out. Ending up needing to add the sanitize: true parameter since HTML is included in the content.

answered May 21 at 17:47

Mathew Smith

1552 silver badges10 bronze badges

Collectives™ on Stack Overflow

HTML Form Won't Display in Bootstrap Popover

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related