JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div class="hidden">
  <p id="zagolovok-1">This is 1st zagolovok.</p>
  <p  id="title-1">This is 1st title. <a href="http://google.com">Some link</a></p>
</div>
<a rel="gallery" data-title-id="title-1" title="Lorem ipsum" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<div class="hidden">
  <p id="zagolovok-2">This is 2st zagolovok.</p>
  <p  id="title-2">This is 2st title. <a href="http://google.com">Some link</a></p>
</div>
<a rel="gallery" data-title-id="title-2" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

CSS

.hidden {
 display: none;   
}
.fancybox-title-over-wrap {
    width: 100%;
    padding: 0;
}

.fancybox-title-over-wrap > div {
    padding: 10px;
}

JavaScript

$(".fancybox").fancybox({
        beforeLoad: function() {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);
            
                if (el.length) {
                    this.title = el.html();
                }
            }
        },
        
    afterShow: function() {
        $(".fancybox-title").wrapInner('<div />').hide();
        
        $(".fancybox-wrap").hover(function() {
            $(".fancybox-title").show();
        }, function() {
            $(".fancybox-title").hide();
        });
    },
    helpers : {
        title: {
            type: 'over'
        }
    }
});