Bootstrap tooltip HTML on focus able to enter characters-CodePudding

Referring to a question which is already answered, I would like to ask another question, when I am focusing into the tooltip which has contenteditable property on it, I can enter the text on it which supposed not allowed.

I have tried to put pointer-events: none, however I can still enter any characters on the HTML tag that has contenteditable property.

How can I solve this?

var tooltipTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

span[contenteditable] {
  pointer-events: none !important;
}

<head>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <h6>Bootstrap Icon Tooltip Example</h6>


  <span contenteditable  data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="hover focus" title="This is a tooltip with <a href='#'>HTML</a>"></span> This tooltip uses focus and hover. Hover and then
  click the icon.

  <br/>

  <span contenteditable  data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="focus" title="This is a tooltip with <a href='#'>HTML</a>"></span> This tooltip uses focus only. You must click the icon
  to view the tooltip.
</body>

CodePudding user response：

This question has already been answered from the following Question by Yogi with the following proposed answer:

HTML

<span contenteditable onkeypress="event.preventDefault()" onpaste="event.preventDefault()"  data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="hover focus" title="This is a tooltip with <a href='#'>HTML</a>"></span>

or with jQuery

$("[data-bs-toggle=tooltip]").on("keypress paste", function (e) {
    e.preventDefault();
});

Thank you for all who visited or answered this question