How to make draggable pop over in bootstrap using jquery or css?
Question
I want to draggable or movable popover because when there are two popover open in one page then two popover are overlapped by each other. For this thing you can check below screenshot.
So i want to move popover using the mouse cursor pointer where i want to place. So i can see both popover at same time.
My already code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover1</a>
<br/>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
I think i can use draggable function but it is not working i don't know how exactly way to apply on jQuery so it can be work.
According my need you can check this movable modal, I need this same movable action on my popover. For this please check below screenshot of gif and link for more understanding.
Link: https://codepen.io/adamcjoiner/pen/PNbbbv
Thanks In Advance.
2 answers
solution1
2 ACCPTED 2019-02-04 05:48:52
You can Use data-placement="..." in your "a" tag to handle where popovers should open. For example in your code it can be like :
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover Example</h3> <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p> <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-placement="top">First popover</a> <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-placement="bottom">Second popover</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>
the values inside data-placement can be :top-bottom-right and left
UPDATE: I think it will work for you :
$(".draggable").popover({ html:true, content: "<p>Drag me</p>" }).popover('show'); $('.popover').draggable();
.popover{position: relative !important}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js" integrity="sha256-0vBSIAi/8FxkNOSKyPEfdGQzFDak1dlqFKBYqBp1yC4=" crossorigin="anonymous"></script> <div class="row"> <div class ="col-auto"> <h2> sendhelp </h2> </div> </div> <div id="Normal"> <a class="btn btn-primary draggable">Popover</a> </div>
UPDATE 2: I made a fiddle and you can use it : https://jsfiddle.net/uhwrev06/
Now it moves exactly with the mouse without no space between them !
UPDATE 3: I fixed the problem you just mentioned! https://jsfiddle.net/pe2zf1x8/
solution2
0 2019-02-04 05:46:21
Suggestion: Try taking control over popover and overriding the CSS.
$('#elm').popover({
placement: 'bottom',
html: true,
content: function() {
return $('#container').html();
},
template: '<div class="popover my-popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'
});
CSS sample:
.popover.my-popover {
margin-left: 15px;
margin-top: -20px;
/* Or: margin: -20px 0 0 15px; */
}
Subscribing to the shown.bs.popover Event:
$('#my-popover').on('shown.bs.popover', function() {
// parseInt removes "px"
var currentTop = parseInt($(this).css('top'));
var currentLeft = parseInt($(this).css('left'));
$(this).css({
top: (currentTop + 200) + 'px',
left: (currentLeft + 150) + 'px'
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.