Magnific PopUp - Custom title Css

I'm using Magnific pop up to display a lightbox gallery and I'm trying to customize the title apparence when the pop up show the image. I can change the general look of the title with css, changing color, size,... but I can't have just some words bolder, having two lines of text with br,... even if I change the title source with titlesrc. I've seen in the exemples of the documentation that you can have a "subtitle" by setting it directly inside the js but it will be the same for every images or I have around 50 images with a different title for each one:

$(document).ready(function() {
$('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
        }
    }
});

});

Solution

With the default options, you can set in title attribute also some HTML. So you can change these few words with CSS. For example:

<a href="myimage.jpg" title="Title.<span class='myclass'>Subtitle</span>"><img src="thumb.jpg" width="100" height="100"></a>