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 ".
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/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/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: