Display alt text as tool tip on page

I'm using the Background Manager Wordpress plugin (http://wordpress.org/plugins/background-manager/) and I'm trying to display a custom element on the page that I have not been able to find any help on as of yet, including with their forums.

The plugin outputs a full-screen background, which includes alt text, and I'm wondering if there's a way I can display the alt text on the page in a DIV?

The code that displays on the page currently is:

!-- Background Manager Start --
div id="myatu_bgm_img_group" class="myatu_bgm_fs" style="overflow: hidden;"script type="text/javascript"
    /*![CDATA[*/
        try{(function(a){myatu_bgm.addTopImage("",function(){if((typeof myatu_bgm!=="undefined")(myatu_bgm.initial_ease_in==="true")){a(this).fadeIn("slow")}else{a(this).show()}})}(jQuery))}catch(e){};
    /*]]*/
    /scriptnoscriptimg id="myatu_bgm_top" class="myatu_bgm_fs" src="http://mgrezova.webfactional.com/wp-content/uploads/2013/06/agnesbshirt.jpg" alt="Caption Text"   //noscript/div
!-- Background Manager End --

I can adjust the plugin to output the caption as the image title instead, if that makes it easier, but obviously I'd prefer not to change the plugin so I can allow for updates to the plugin later on.

I tried adding in CSS (using .myatu_bgm_fs:after { content: attr(alt) ; }) to make this work, but it wasn't correct.

If I can't find a solution this way, I've got an option to create a custom taxonomy along with some javascript, but I'd prefer not to go that route as it still requires a fair bit of testing compared to this pre-built plugin.

Thanks for any help.

Update:

I'm thinking I must be able to use javascript to make this work, but everything I have tried has failed. One test was to use this scripting, but perhaps I'm using it incorrectly:

$('img[alt]').each(function() {
    $('.inner-quote').append('div class="quotes"' + $(this).attr('alt') + '/div');
});

Update 2: It turns out that javascript won't work because the image is being contained within the NOSCRIPT element. Not sure how to approach this now except to get rid of the plugin and do this another way.

Topic images css plugins Wordpress

Category Web


It might be worth considering another plugin like http://wordpress.org/plugins/wp-supersized/ Otherwise I guess you might end up having to change the plugin (perhaps forking it on Github?) https://github.com/Myatu/Background-Manager-WP/blob/269fb907d652ac78e3f9fb0a402375f06ac449f9/resources/views/pub_footer.html.twig

(Just realised your thread is related to another thread with more contributors: Display alt text as tool tip on page)

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.