图像引导工具提示的大小调整

Question

我试图调整引导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>

​