Как с помощью JS добавить в title отображаемое изображение?

Рейтинг: 1Ответов: 1Опубликовано: 08.08.2025

Есть поле input с типом file. В него загружаются изображения. Хочу реализовать превью выбранных изображений при наведении на инпут. Использую Bootstrap.

  1. Установил в tooltip значение на html - true
$('[data-toggle="tooltip"]').tooltip({
 animated: 'true',
 placement: 'bottom',
 html: true
});
  1. Если я добавлю на страницу статичное изображение, оно без проблем появляется.
<input class="custom-file-input" name="file1" id="file1" type="file" data-toggle="tooltip" title="<img class='w-100 rounded shadow-sm' src='https://..../.../.....png' />" required>
  1. Я пробую добавить изображение из reader.onload
...
let img_ = "<img src='"+e.target.result+"' />";
$(el).attr('title', img_)
...

Добавляется формат "Текст" и я вижу текст, но не вижу изображение. Подскажите, есть возможность сделать так, как мне нужно или при добавлении JS/JQ не получиться передать в атрибут интерпретируемый HTML?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Нашел решение. Оставлю тут, может кому-то будет интересно. После добавления атрибутов я снова вызвал тултип с параметром html: true

let img_ = "<img src='"+e.target.result+"' />";
$(el).attr('title', img_)
$('[data-toggle="tooltip"]').tooltip({
  html: true
});

Так у меня заработало. Если есть более хорошие способы, пожалуйста, поделитесь.