Search code examples
jqueryhtmldraggablepopovermovable

How to make draggable pop over in bootstrap using jquery or css?

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. enter image description here

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 enter image description here

Thanks In Advance.

Solution

  • 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/