Стиль для всплывающего названия картинки- как?

Если картинке присвоить название (title), то при наведении на нее курсора это название всплывает в маленьком окошке.
Но окошко слишком маленькое и невзрачное.
Вопрос- как image title вывести на картинке в более красивом виде? Подойдет любой вариант- tooltip, overlay или другой, главное чтобы использовался УЖЕ ГОТОВЫЙ title (картинок много) и можно было настроить оформление.

если используете bootstrap, то для тега, в котором прописан атрибут title допишите класс hasTooltip
если используете uikit, то для тега, в котором прописан атрибут title допишите атрибут data-uk-tooltip и дополнительно подключите tooltip.js из состава uikit
если не используете css-фреймворки, то задача нетривиальная: тут скрипт писать придется, либо отказываться от атрибута title и добавлять overlay-элемент и заверстывать его
для более детальной помощи нужно видеть сайт

На самом деле есть и bootstrap (шаблон gantry 5) и uikit (в составе jbzoo), но вот куда дописывать атрибуты я пока не понимаю, поскольку сам title вызывается через скрипт.
сейчас работает вот такая конструкция
       <?php if ($this->checkPosition('image')) : ?>
                <div class="item-image uk-divider">
                   <p align="center"><?php echo $this->renderPosition('image'); ?></p>
                </div>
<script>
        jQuery(function($) {
            newsImg = $(".item-image img");
            newsImg.after(function(){
                imgTitle = $(this).attr("title");
                if (imgTitle) return "<p>" +imgTitle+"</p>";
            });
        });
    </script>

            <?php endif; ?>но она рушит оформление (картинки были в ряд, а становятся в столбик), поэтому ищу решение с выводом title поверх картинки.
А сайт пока дома на денвере.

картинка внутри позиции в джибизу? тогда надо переопределять элемент jbimage и дописывать уже туда (как переопределять - на форум по джибизу)