图片的大小调整 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;
}

效果很好，但我所有的常规文本工具提示也会缩放。我希望文本工具提示保持原样。我尝试将 class 添加到我的代码中，但问题实际上出在悬停时生成的工具提示代码中。有没有办法将我的自定义 CSS 仅用于图像？

Answer 1

我认为工具提示 template option 可以帮助您做您想做的事。

例如，您可以仅为图像创建特定模板，使用特定 class 仅设置其工具提示的格式。

$(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>

图片的大小调整 Bootstrap 工具提示

Sizing Bootstrap tooltip for image

css

bootstrap-4

twitter-bootstrap-tooltip