Popup

gistfile1.txt

<div class="column col-3">
    <span class="h4">Quality of Life Questions</span>
    <div class="popover popover-bottom-right">
        <a href="javascript:void(0)" onclick="javascript:void(0)"><i class="fa fa-info-circle"></i></a>
        <div class="popover-container">
            <div class="card">
                <div class="card-body">
                    Higher scores correspond with a better quality of life. The range for 
quality of life scores is between 0-100.
                </div>
            </div>
        </div>
    </div>
</div>




.popover {
  display: inline-block;
  position: relative;
}

.popover .popover-container {
  font-size: 12px;
  content: attr(data-tooltip);
  left: 50%;
  opacity: 0;
  padding: .4rem;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease;
  width: 320px;
  z-index: 901;
}

.popover :focus + .popover-container,
.popover:hover .popover-container,
.popover .popover-container:hover {
  display: block;
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.popover .card {
  border: 0; 
  box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
}

.popover.popover-bottom-right .card-body {
  background-color: #41444a;
  color: #fff;
  line-height: 1.2em;
}
.popover.popover-bottom-right .popover-container {
  top: 15px;
  left: 15px;
}
.popover.popover-bottom-right :focus + .popover-container,
.popover.popover-bottom-right:hover .popover-container,
.popover.popover-bottom-right .popover-container:hover {
  transform: translate(0%, 0) scale(1);
}

.card {
  background: #fff;
  border: .05rem solid #e7e9ed;
  border-radius: .1rem;
  display: flex;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card .card-body {
  padding: .8rem;
  padding-bottom: 0;
}

.card .card-body:last-child {
  padding-bottom: .8rem;
}