CODEWITHSUNDEEP
jquerycsstwitter-bootstraptooltip
FiddlingAway
FiddlingAway

Reputation: 2251

Displaying full image in tooltip inside Bootstrap modal

Here's my problem. I'm displaying an image inside a tooltip, which (the tooltip) is inside a modal. All is fine and well when the image height and width conform to modal's height and width. If there's an image inside the tooltip which is larger than the modal, only a fraction of the image is show, while the rest is not visible (presumably, stuck inside the modal).

I've noticed that a temporary div is being created on tooltip hover, and I've tried targetting its CSS by class, and setting position:absolute; top;0; z-index: 99999; to no avail (tested with and without !important; removed from the code posted here, since it did nothing).

You can see the issue 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();
});

Upvotes: 0

Views: 1060

Answers (1)

Sensoray
Sensoray

Reputation: 2430

Add overflow: visible; to #myModal and it will allow the whole image to show, I tested it on your codepen. Right now bootstrap automatically sets .modal to overflow:hidden

Upvotes: 1

Related Questions