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

debugcn 发表于 Dev

圣塔

我正在尝试使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用于图像？

雷塞达诺

我认为工具提示的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。