<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
display:none;
min-width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
top: -50px;
margin-left:7px;
}
.tooltip .tooltipPointer {
display:none;
content: "";
position: absolute;
top: 12px;
left: 97%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
/*left:
100%;//for rtl
border-color: transparent
rgba(0, 0, 0, 0.08) transparent rgb(0, 0, 0);*/
}
/*.tooltip:hover
.tooltiptext {
visibility: visible;
}*/
</style>
<body style="text-align:center;">
<div style="height:300px">
<h1>Yesssssssssssss my tooltip</h1>
</div>
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip" style="float:left">
Hover over me
<span class="tooltipPointer"></span>
<div class="tooltiptext">
<div id="listHolder">
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-0" value="GT_BUILDINGS_MARK_MB">معالم رئيسية -ابنية</label><br>
<label class="LayersLabel"><input type="radio" name="theme-choices" id="radio-choice-30" value="ii_oracle_maps_internal_others">طبقة نتيجة البحث</label><br>
</div>
</div>
</div>
<div style="float:left">
Same
shit different day
</div>
<script type="text/javascript">
$(document).ready(function () {
var w = $('.tooltip').width();
var float = $('.tooltip').css('float');
var tooltipHolder = $('.tooltiptext');
$(tooltipHolder).css('left', w);
$('.tooltip').click(function () {
if ($(tooltipHolder).html().trim().length < 5) {
$('.tooltiptext').css('display', 'none');
$('.tooltipPointer').css('display', 'none');
} else {
calculateTooltipDim();
$('.tooltiptext').css('display', 'block');
$('.tooltipPointer').css('display', 'block');
}
});
$('.tooltiptext').hover(
//
mouse-over
function () { },
//
mouse-out
function () {
$(this).css('display', 'none');
$('.tooltipPointer').css('display', 'none');
});
$('.tooltip').hover(
//
mouse-over
function () { },
//
mouse-out
function () {});
});
function calculateTooltipDim() {
var tooltipHolder = $('.tooltiptext');
var $element = $('.tooltip');
var
val = (($(tooltipHolder).height()+2) -
($(document).height() - $element.offset().top - $element.height()));
$(tooltipHolder).css('top', val * -1);
}
</script>
</body>
</html>
