Question

我要将工具提示放到图像中，该图像将显示带有img，文本并能够使用HTML，CSS的小屏幕我使用boostrap，没有理想的下一步：<< / p>

类似这样的事情： sample

这只是代码的一部分。

    <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="container">
              <div class="row">
              <div class="col-md-12 align-content-center">
                  <div class="col-lg-12 text-center">
                    <h3 class="text-uppercase">Team of 2018-2019</h3>
                    </div> 
                <div class="team-memberpre">
                      <img class="mx-auto rounded-circle" src="...image...">
                      <h4>...name....</h4>
                  <p class="text-muted">President</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">
                <div class="team-member">
                  <img class="mx-auto rounded-circle" src="..image.." alt="">
                  <h5>...name....</h5>
                  <p class="text-muted">Lead Marketing</p>
                </div>
              </div>
              </div>
          </div>
      </div>

Answer 1

这是jsfiddle的典范

您可以使用data-html="true"和data-content="html code"的弹出框来实现图片+文字

您的.html代码

<div class="d-flex justify-content-center">
  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content='<div class="row">
    <div class="col">
      <img src="https://www.anime-planet.com/images/anime/covers/naruto-22.jpg" width=60 height=60 />
    </div>
    <div class="col">
      <b>some</b> text here
    </div>
  </div>'>
  Popover on with image and text
</button>
</div>

.js文件

$(function() {
  $('[data-toggle="popover"]').popover()
})

如何将图像和文本放入工具提示中？

1 个答案: