Tooltipster使工具提示固定大小并固定在底部

Question

我正在尝试制作像themeforest一样的工具提示：）

<div class="container">
    <div class="rows">
        <div class="cols">
            <div class="content">
                <img src="https://dummyimage.com/100x100/000/fff&text=X" alt="" class="tooltipster">
                <div class="tooltip_templates" style="display: none;">
                    <div class="featured-tooltip tooltip_content">
                        <img src="https://dummyimage.com/400x200/000/fff&text=X" alt="">
                        <span class="title">Product1</span>
                        <div class="featured-footer">
                            <div class="cat">
                                <span>Clothing</span>
                            </div>
                            <div class="price">
                                <span>$50</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cols">
            <div class="content">
                <img src="https://dummyimage.com/100x100/000/fff&text=Y" alt="" class="tooltipster">
                <div class="tooltip_templates" style="display: none;">
                    <div class="featured-tooltip tooltip_content">
                        <img src="https://dummyimage.com/400x200/000/fff&text=Y" alt="">
                        <span class="title">Product2</span>
                        <div class="featured-footer">
                            <div class="cat">
                                <span>Clothing</span>
                            </div>
                            <div class="price">
                                <span>$10</span>
                            </div>
                        </div>
                    </div>
                </div>              
            </div>
        </div>
        <div class="cols">
            <div class="content">
                <img src="https://dummyimage.com/100x100/000/fff&text=Z" alt="" class="tooltipster">
                <div class="tooltip_templates" style="display: none;">
                    <div class="featured-tooltip tooltip_content">
                        <img src="https://dummyimage.com/400x200/000/fff&text=Z" alt="">
                        <span class="title">Product3</span>
                        <div class="featured-footer">
                            <div class="cat">
                                <span>Clothing</span>
                            </div>
                            <div class="price">
                              <span>$40</span>
                            </div>
                        </div>
                    </div>
                </div>              
            </div>
        </div>
    </div>
</div>

Jquery的：

$(document).ready(function() {
    $('.tooltipster').each(function (_, tTip) {
        $(tTip).tooltipster({
            content: $(tTip).parent().parent().find('.tooltip_content'),
            theme: 'tooltipster-shadow',
            delay: 0,
            animationDuration: 0,
            debug: false,
            arrow: false,
            side: 'right',
            distance: 0,
        });
    });
});

工具提示应与主要来源的底部对齐。当我悬停任何元素时，如果不合适，它必须与左对齐。不是底部或顶部。

有时候，如果工具提示不合适，它会调整为更小。我不想这样。它必须是固定的大小。如果不合适，只需改变位置。

这是我的代码：https://codepen.io/wpuzman/pen/oyBvox

您也可以查看themeforest.net