Using nested HTML in an HTML element

Question

So lately I've been trying to learn a bit more about nested usage of HTML in Bootstrap.

Whilst following a guide on the usage of Popovers I've came across this;

<button
  id="btn3"
  type="button"
  class="btn btn-primary show"
  data-bs-toggle="popover"
  data-bs-trigger="focus"
  title="<h1><a href='#btn2'class ='btn btn-danger' onclick='innerFunc()' type='button' id='btnInner' data-bs-toggle='btn2'>click me</a> title</h1>"
  data-bs-content="content"
  data-bs-html="true"
>
  Popover!
</button>

I'm trying to reach this inner <a> tag by it's given id.

When I reference this in my Javascript it returns a null object to the console.

Is there any way of reaching this nested object? If so can i hold a reference to it in a variable for further use?

Answer 1

While researching deeper into the subject I came across this post;

Bootstrap 5 popover with html content

In this thread the answer provided by Gregory Michael gave me an answer. Apparently the options you pass via Javascript are overridden by the HTML content of the DOM object so in order to dynamically change this object you would have to pass the custom HTML in the specified object creating a separate object and overriding the other one.

Thank you @CBroe for your suggestion. ^^

Answer 2

you can't put html inside an attribute, you have to follow popover rules from bootstrap

Bootstrap Popover

Otherwise you can add custom html through JS without Bootstrap

const popover = document.querySelector('[data-bs-toggle="popover"]')

After that you can tweak and add some html to the element.