How to Position Popover Over a Highlighted Portion of Text

How to position a Bootstrap popover?

This works. Tested.

.popover {
top: 71px !important;
left: 379px !important;
}

How to achieve the same position of popover when click on element

You can set the popovers offset in JS to $(this).position(), which is basically the #sla-data-range element. From there a little bit of massaging to place it directly where you want it.

I just adjusted the left and top positions inside the JQuery offset function

IMOPRTANT SIDE NOTE --> Be careful using variable names that are reserved in Javascript and/or Javascript libraries like JQuery like --> offset

    $('#popover836038').offset({
top: $(this).position().top + 30,
left: e.pageX - $('.popover').width() / 2
}).fadeIn()

e.pageX ==> mouses x position on click - the popovers width divided by 2, this will center the popover @ the place you clicked.

$(function() {
$('#sla-data-range').click(function(e) {
const dateControl = $(e.target)
// Naming a variable offset -->
// !!!CAREFUL DEFINING A VARIABLE A RESERVED NAME IN JQUERY LIBRARY
const offset = dateControl.offset()
let relativeTop = (e.pageY - offset.top)
let relativeLeft = (e.pageX - offset.left)
$('#popover836038').offset({
top: $(this).position().top + 30,
left: e.pageX - $('.popover').width() / 2
}).fadeIn()
})
$(document).on('click', function(e) {
if ($(e.target).closest("#sla-data-range").length === 0) {
$("#popover836038").offset({
left: 0,
top: 0
}).css({
'display': 'none'
})
}
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.mrp-container {
margin-top: 10px;
}

.mrp-icon {
border: solid 1px #ddd;
border-radius: 7px 0px 0px 5px;
color: #40667A;
background: #eee;
padding: 7px;
margin-right: 0px;
}

.mrp-monthdisplay {
display: inline-block!important;
border: solid 1px #ddd;
padding: 5px 12px 5px 8px;
border-radius: 0px 5px 5px 0px;
background-color: #fff;
cursor: pointer;
margin-left: -5px;
}

.mrp-lowerMonth,
.mrp-upperMonth {
color: #40667A;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
}

.mrp-to {
color: #aaa;
margin-right: 0px;
margin-left: 0px;
font-size: 11px;
text-transform: uppercase;
/* background-color: #eee; */
padding: 5px 3px 5px 3px;
}

.mpr-calendar {
display: inline-block;
padding: 3px 5px;
border-right: solid #999 1px;
}

.mpr-calendar::last-child {
border-right: none;
}

.mpr-month {
padding: 20px;
text-transform: uppercase;
font-size: 12px;
}

.mpr-calendar h5 {
width: 100%;
text-align: center;
font-weight: bold;
font-size: 18px
}

.mpr-selected {
background: rgba(64, 102, 122, 0.75);
;
color: #fff;
}

.mpr-month:hover {
border-radius: 5px;
box-shadow: 0 0 0 1px #ddd inset;
cursor: pointer;
}

.mpr-selected.mpr-month:hover {
border-radius: 0px;
box-shadow: none;
}

.mpr-calendarholder .col-xs-6 {
max-width: 250px;
min-width: 250px;
}

.mpr-calendarholder .col-xs-1 {
max-width: 150px;
min-width: 150px;
}

.mpr-calendarholder .btn-info {
background-color: #40667A;
border-color: #406670;
width: 100%;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 10px;
padding: 10px 0px;
}

.mpr-quickset {
color: #666;
text-transform: uppercase;
text-align: center;
}

.mpr-yeardown,
.mpr-yearup {
margin-left: 5px;
cursor: pointer;
color: #666;
}

.mpr-yeardown {
float: left;
}

.mpr-yearup {
float: right;
}

.mpr-yeardown:hover,
.mpr-yearup:hover {
color: #40667A;
}

.mpr-calendar:first .mpr-selected:first {
background-color: #40667A;
}

.mpr-calendar:last .mpr-selected:last {
background-color: #40667A;
}

.popover {
max-width: 1920px!important;
}

.mrp-disablemonth {
opacity: 0.2;
pointer-events: none;
}

.popover-content {
padding: 0px 14px;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.col-xs-3 {
width: 25%;
float: left;
position: relative;
min-height: 1px;
}

.popover.bottom {
margin-top: 10px;
}

.fade.in {
opacity: 1;
}

.popover {
max-width: 1920px!important;
}

.search-holder * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

.popover.bottom>.arrow {
top: -11px;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, .25);
}

.popover>.arrow {
border-width: 11px;
}

.popover>.arrow:after {
content: "";
border-width: 10px;
}

.popover>.arrow,
.popover>.arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

.popover.bottom>.arrow:after {
top: 1px;
margin-left: -10px;
content: " ";
border-top-width: 0;
border-bottom-color: #fff;
}

.col-xs-6 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.col-xs-12 {
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

h5 {
font-family: inherit;
font-weight: 500;
line-height: 1.0;
color: inherit;
}

.row:after,
.row:before {
display: table;
content: " ";
}

.row:after {
clear: both;
}

:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

button,
select {
text-transform: none;
}

button {
overflow: visible;
}

button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}

table {
border-collapse: separate;
text-indent: initial;
border-spacing: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap Month Range Picker</title>
<!-- <link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

</head>

<body>
<table width="100%">
<tr>
<td width="50%"></td>
<td width="50%" class="parent">
<div id="sla-data-range" class="mrp-container">
<span class="mrp-icon"><i class="fa fa-calendar"></i></span>
<div class="mrp-monthdisplay" style="width:160px">
<span class="mrp-lowerMonth"></span>
<span class="mrp-to"> - </span>
<span class="mrp-upperMonth"></span>
</div>
<input type="hidden" value="" id="mrp-lowerDate" />
<input type="hidden" value="" id="mrp-upperDate" />
</div>
<div class="popover fade bottom in" role="tooltip" id="popover836038" style="display: none">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div id="mprMonthContent" class="popover-content">
<div class="row mpr-calendarholder">
<div class="col-xs-6">
<div class="mpr-calendar row" id="mpr-calendar-1">
<h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left"></i><span>2020</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display: none;"></i></h5>
<div class="mpr-monthsContainer">
<div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span>
<span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mpr-selected" style="background: rgb(64, 102, 122);">Jul</span>
<span data-month="08" class="col-xs-3 mpr-month mpr-selected">Aug</span>
<span data-month="09" class="col-xs-3 mpr-month mpr-selected">Sep</span><span data-month="10" class="col-xs-3 mpr-month mpr-selected">Oct</span><span data-month="11" class="col-xs-3 mpr-month mpr-selected">Nov</span><span data-month="12"
class="col-xs-3 mpr-month mpr-selected" style="background: rgb(64, 102, 122);">Dec</span></div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="mpr-calendar row" id="mpr-calendar-2" style="border: none;">
<h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left" style="display: none;"></i><span>2021</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display: none;"></i></h5>
<div class="mpr-monthsContainer">
<div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span>
<span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mrp-disablemonth">Jul</span><span data-month="08" class="col-xs-3 mpr-month mrp-disablemonth">Aug</span>
<span data-month="09" class="col-xs-3 mpr-month mrp-disablemonth">Sep</span><span data-month="10" class="col-xs-3 mpr-month mrp-disablemonth">Oct</span><span data-month="11" class="col-xs-3 mpr-month mrp-disablemonth">Nov</span>
<span
data-month="12" class="col-xs-3 mpr-month mrp-disablemonth">Dec</span>
</div>
</div>
</div>
</div>
<div style="width:100%; text-align:center"><button type="button" id="btnClear" class="btn btn-primary">Clear</button></div>
</div>
</div>
</div>
</td>
</tr>
</table>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>

</html>

How to generate a Bootstrap Popover when selecting text across multiple divs

Just change your .on("click"...) to .on("mouseup"...).

Tested on Ubuntu 16.04, x64.
Firefox 66.0.2

$("#main_div").on("mouseup", ".messagebox", function(e) {  var selected_text = window.getSelection().toString();  var elem = $(this);  var row = elem.closest(".message_row");  var id = $(row).attr("data-msg-id")  e.stopPropagation();  if (selected_text !== "") {    elem.popover({      placement: "top",      content: ("ID:" + id + " Text: " + selected_text),      trigger: "manual",    });    elem.popover("show");  }});
// Remove Popover on Hover$("body").on('mouseenter', '.popover', function(e) { e.stopPropagation(); $(this).remove();});
#main_div {  padding-top: 50px;}
.messagebox { background: #f8f9fa; border: solid 1px #6c757d; margin-top: 5px; padding-left: 5px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div id="main_div"> <div class="big_box"> <div class="message_row" data-msg-id="50"> <div class="messagebox"> <div class="message_content"> <p> Random Text Here. </p> </div> </div> </div> <div class="message_row" data-msg-id="51"> <div class="messagebox"> <div class="message_content"> <p> Some Text here </p> </div> </div> </div> <div class="message_row" data-msg-id="52"> <div class="messagebox"> <div class="message_content"> <p> Some more text here. </p> </div> </div> </div> </div> </div></div>

Bootstrap Popover/Tooltip for mapped areas on an Image

Okay I got some help and I've fixed the problems I was initially having. My problem was that the popover code was associated with my anchor (the picture) instead of the contents. That being said, I had to use the individual IDs for each piece of the contents:

<script type="text/javascript">
$(function() {
$('#jon').popover({
placement : 'right'
});

$('#jon2').popover({
placement : 'right'
});

$('#jon3').popover({
placement : 'right'
});

$('#jon4').popover({
placement : 'right'
});

$('#jon5').popover({
placement : 'right'
});

$('#jon6').popover({
placement : 'right'
});
});
</script>

And in the CSS, I followed this pattern:

...
#thing1, #jon3 {
position:absolute;
width:50px;
height:17px;
top:346px;
left:194px;
}

#thing2, #jon4 {
position:absolute;
width:51px;
height:17px;
top:346px;
left:141px;
}
...

I'm sure there's a more elegant way to approach this problem, but for the moment this code works perfectly for me.

How to move the Bootstrap Popover's position down?

Very simple:

Demo http://jsfiddle.net/d9qJQ/1/

.chartSection .popover {
margin-top:10px; //or any value that you want
}


Related Topics



Leave a reply



Submit