How to show image in Tooltip (Bootstrap 5) / ERROR 304

B0BBY 0
Viewed 25

I'm working with Bootstrap 5.

I have a tooltip where I want to display a text (which is working fine) and a image so i've used data-bs-html="true".

My input incl. my tooltip looks like following:

<input
  class="form-control tooltip-element"
  data-bs-placement="right"
  data-bs-html="true"
  title="Test title.<br><img src='../assets/picture.png'>"
/>

When I go to Network I will always get ERROR 304 because the file will be lost in the cache.

How can I solve this problem? Thanks in advance!

INFO: Path and all values / definitions are correct.

bootstrap-5 image javascript
1 Answers

I think it's about img.src. I did create an example at here. You can hover on input and image will show after a while

  <input
  id="example"
  class="form-control tooltip-element"
  data-bs-placement="right"
  data-bs-html="true"
    title="Test title.<br><img src='https://picsum.photos/200/300'>"

/> 

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body,

  // read more at https://getbootstrap.com/docs/5.0/components/tooltips/#options
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'// or document.querySelector('#boundary')
})
nhy0
Related