Размер всплывающей подсказки Bootstrap для изображения

Я пытаюсь адаптировать всплывающую подсказку 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 только для изображений?


css bootstrap-4 twitter-bootstrap-tooltip
person santa    schedule 07.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что 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>

person ReSedano    schedule 07.10.2019