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
Using Modernizr and Jquery to Animate If CSS3 Transitions Don't Exist
How to Handle Radio Event When Icheck-Helper Is Used
Are There Any Standards for Mobile Device Web Browsers in Terms of Thread Sleeping
Changing CSS Properties via JavaScript
Is It Possibly to Keep Vertical Rhythm Using Only CSS
Uncaught Typeerror: Cannot Set Property 'Onclick' of Null
How to Clear React-Native Cache
Gulp with Gulp-Ruby-Sass: Error: ../Style.Css.Map:3:1: Unknown Word
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
Css3/Js Get Position of Element During Animation
How to Enable the JavaScript Error/Debug Console for Safari Within Android
Why Are Initial CSS Styles Not Visible on Dom Element.Style Field
Changing Leaflet Markercluster Icon Color, Inheriting the Rest of the Default CSS Properties
Send a Notification from JavaScript in Uiwebview to Objectivec
How to Achieve Fixed Position Background Scroll/Reveal Effect? Jquery Plugin Available
How to Activate a CSS3 (Webkit) Animation Using JavaScript
Websites That Archive Cross-Browser, Cross-Platform CSS/Js Bugs