How do I get HTML elements with quotation marks into a Bootstrap popover?

Question

How do I get HTML elements with quotation marks into a Bootstrap popover?

212 Views Asked by Seth Schaffner At 24 August 2022 at 23:13

My Bootstrap Popover button:

<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-placement="left" data-content="CONTENT">
   Popover Text
</button>

I want to get this HTML into the data-content so it displays when the popover is clicked:

<a href="@Url.Action("Edit", "RentalHistories", new { id = item.RentalHistoryId })">
   EDIT
</a>

Unfortunately the Quotes in the HTML seem to break it. I have tried using single quotes, double quotes and the escape quote code &quot.

Original Q&A

There are 1 best solutions below

**Mergo22** · Answer 1 · 2022-08-25T04:48:57.507000

I believe this is what youre looking for:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>

<body>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content='<a href="@Url.Action("Edit", "RentalHistories", new { id = item.RentalHistoryId })">
   EDIT
</a>'>
   Popover Text
</button>

</body>
</html>

It seems its also important for which version of bootstrap you are using. From researching a bit, some of the older bootstrap versions did not require you to put something like 'data-bs-placement' but instead 'data-placement'. Here I am using Bootstrap version 5.0.

Bootstrap 5.0 DOCS also shows you can initialize a popover to appear visible by using (adding to your .js file or adding a tag:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Another thing is that you were right to use single quotes to begin with because double quoting with nested double quotes can cause confusion when executed.

References:

Bootstrap 5.0 Popovers DOCS

Reason for data-bs instead of data-attribute

How do I get HTML elements with quotation marks into a Bootstrap popover?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in QUOTATION-MARKS

Trending Questions

Popular # Hahtags

Popular Questions