0
これは私の問題です。私は(ツールチップ)がモーダルの内側にあるツールチップの中にイメージを表示しています。イメージの高さと幅がモーダルの高さと幅に一致すると、すべてが問題なくうまくなります。モーダルより大きいツールチップの中に画像がある場合、残りの部分は表示されません(おそらく、モーダル内に詰まっている)が、画像のほんの一部が表示されます。Bootstrapモーダル内のツールチップ内にフルイメージを表示
私は、ツールチップのホバー上に一時的な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();
});
これは、トリックでした。 #myModalの代わりに、私は一時的な部門を狙っていた。 – FiddlingAway