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 option可以帮助您完成所需的工作。

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

$(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工具提示

1 个答案: