How to change the position of the tooltip and add an image to it?

Question

css

I need to make my tooltip appear above the information box, have an image inside, and tooltip 'a's tail pointing down. For this I use qtip2 in the project. I want my output to be something like this: https://monosnap.com/file/MGy8vjYV06dmeH6x7vhJdewu... . Here is a piece of my code:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-3  col-sm-3  col-md-3 col-lg-3 tooltip-item ">
         <div class="wrapper-tooltips test">
             <div class="first-line">
                2 min
             </div>
             <div class="second-line">
                from
             </div>
             <div class="destinations-line">
             <span>square</span>
             </div>
        </div>
   </div>
</div>

$('.test').qtip({
        content: {
            text: 'My common piece of text here'
        },
        position : {
            my : 'top center',
            at : 'top center'

        }
    })

Does this plugin support the features that I have in mind? If not, then tell me some other plugin for this case.
Thank you for your time.

Answer 1

I can’t write much, the child is in my arms. I 'll just leave a couple of links:
1. qtip1.com/demos/content/loading#
2. iamceege.github.io/tooltipster/#demos

Answer 2

How to do this is clearly demonstrated:
qtip1.com/docs/tutorials/#position
qtip2.com/demos