Подсказка Sizing Bootstrap для изображения

Question

Я пытаюсь настроить всплывающую подсказку Bootstrap 4 для отображения изображений.

<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>

Чтобы сделать это, мне пришлось добавить собственный CSS, чтобы масштабировать всплывающую подсказку по ширине изображения.

.tooltip-inner {
    max-width: 100%;
}
.tooltip.show {
    opacity: 1;
}
.tooltip img {
    margin: 5px 0;
    background-color: #333;
}

Это прекрасно работает, однако весь мой обычный текстПодсказки также масштабируются. Я бы хотел, чтобы текстовые подсказки действовали так, как они есть. Я попытался добавить класс в мой код, но проблема на самом деле в коде всплывающей подсказки, который генерируется при наведении курсора. Есть ли способ использовать мой собственный CSS только для изображений?

Answer 1

Я думаю, что подсказка template опция может помочь вам сделать то, что вы хотите.

Например, вы можете создать определенный шаблон только для вашего изображения, используя определенный классотформатировать только его всплывающую подсказку.

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();  

  $('[data-toggle="tooltip-image"]').tooltip({
    template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'
  });    
});

.tooltip-inner.image {
    max-width: 100%;
}
.tooltip.show {
    opacity: 1;
}
.tooltip img {
    margin: 5px 0;
    background-color: #333;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <p><a href="#" data-toggle="tooltip" title="Normal tooltip very very long => Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis vehicula diam ac ornare. Vestibulum consequat, quam vitae porta ornare, nibh leo convallis ipsum, vel interdum est ex nec urna. Nunc cursus semper nunc, sit amet viverra quam placerat vitae. Etiam vitae pharetra erat. Integer lobortis enim non nisl hendrerit sodales. Ut interdum luctus tristique. Nullam vestibulum tincidunt ultricies. Etiam ut nunc lectus. Aliquam fermentum magna a arcu finibus sodales. Sed a eros ex. Pellentesque dictum finibus augue nec sagittis. ">Hover over me</a></p>
  <p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p>
</div>