I'm trying to show balloon using balloon.js

Question

I'm trying to show balloon using balloon.js.

https://urin.github.io/jquery.balloon.js/

Here is my code.

<div class="Wrap" style="background:#ccc; width:600px; height:1200px; margin:0 auto;">
    WRAP
    <div class="Bottom" id="target" style="position:fixed; bottom: 0; background:#ff69b4; height:100px; width:60px; margin-right:-360px;">Bottom</div>
</div>
<div id="balloon-image" style="display:none; bottom: 0px;">
    <img style="width: 90px; height: 47px;" src="https://i.imgur.com/Gcmy1AX.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./balloon.js"></script>
<script type="text/javascript">
    let balloonDiv = $('#balloon-image');
    let target = $('#target');
    let balloonSetting = {
        html: true,
        position: "right",
        offsetY: 20,
        tipSize: 0,
        css: null
    };
    balloonSetting.contents = balloonDiv.html();
    target.showBalloon(balloonSetting);
</script>

But, a balloon is fixed and does not follow 'Bottom' div like the following the gif.

https://gfycat.com/CleverGenuineDoe

I want a balloon to follow 'Bottom' div.

But 'Bottom' div cat not change a position because of position:fixed is a specifications.

What should I solve?

Answer 1

make the position of the balloon also fixed.

 .my-balloon {
  position: fixed !important;
}

add the following in Javascript

$.balloon.defaults.classname = "my-balloon";
$.balloon.defaults.css = null;

Sample code can be found below

https://plnkr.co/edit/QmLfx2uH9WDX2eo06PcZ?p=preview