popovers bootstrap not display on all pages on asp.net project razor p

ahmed salah

I work on asp.net razor pages . i face issue i can't display popovers content on all pages of web applications

Iit working and display on some pages and some pages not working

popovers exist on layout page and all pages inherit from it

so my question why popovers not working on some pages and working on another page

i need to know why it not working

my layout page as below so

content This is the popover content. not show on all pages so why and how to solve this issue


				
@RenderBody()

???

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mudzakkir Toha3y ago
Better you use @html.raw("
your profile component
") when formatting profile component. and make sure double quote is escaped.
0
Mudzakkir Toha3y ago
which version of bootstrap do you use? Have you correctly include bootstrap version on the layout page ?

for bootstrap v3.3.7 the content is located at data-content property :
```
Example popover
```
0
Rajkiran Swain3y ago
1. Remove the hardcoded popover content from the layout page script block:
```
$(function () {
  // Enables popover
  $("[data-toggle=popover]").popover();
});
```
1. In each individual page where you want to display a popover, add the data-content attribute to the popover element. Replace "Popover Content" with the specific content you want for that page's popover:
```
  
```
By setting the data-content attribute on each individual page, you can customize the popover content for different pages.

Make sure that you have included the necessary jQuery and Bootstrap files in your layout page or in a shared layout file that is used by all pages. Additionally, ensure that the script block for enabling popovers is placed after the jQuery and Bootstrap script references.

With these modifications, each page will have its own popover content, and the popovers should display correctly on all pages.
0