Question

这是我的问题。我在工具提示中显示一个图像，其中（工具提示）位于模态内。当图像高度和宽度符合模态的高度和宽度时，一切都很好。如果工具提示中的图像大于模态，则只显示图像的一小部分，而其余图像不可见（可能会卡在模态内）。

我注意到工具提示悬停时正在创建一个临时div，我尝试按类定制CSS，并设置position:absolute; top;0; z-index: 99999;无效（使用和不使用!important进行测试;从这里发布的代码中删除，因为它什么也没做。）

您可以看到问题on CodePen。

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-sm btn-info btnclick">Click me!</button>

<div id="myModal" class="modal fade" tabindex="-1" data-focus-on="input:first"><div class="modal-body">
    <h4 class="text-center">Some title</h4>
    <hr>
    <div class="col-md-12 initial">
      <div class="form-group initial">
        <strong>A tooltip<sup class="icon-question tooltips" data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="<img width='800' src='http://i.imgur.com/fsFheFJ.jpg'>">**</sup>, another one<sup class="icon-question tooltips" data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="<img width='128' src='http://i.imgur.com/fsFheFJ.jpg'>">**</sup></strong>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS

.btnclick {
  position: absolute;
  top: 5%;
  left: 2%;
}

#myModal {
  width: 60%;
  height: 30%;
  position: absolute;
  left:20%;
  top: 15%;
  background-color: #fff;
}

sup {
  color: red;
}

的JavaScript

$('.btnclick').on('click', function() {
   $('#myModal').modal('show');
   $('.tooltips').tooltip();
});

Answer 1

将overflow: visible;添加到#myModal，它将允许显示整个图像，我在您的codepen上测试了它。现在bootstrap会自动将.modal设置为overflow:hidden

在Bootstrap模式中的工具提示中显示完整图像

1 个答案: