Add title attribute to class image to add a tooltip with title text to the image

[Sitrakar]

For our online help, we include an alternative text for any pictures present in the website. We want to add a feature that when you hover on the image the alternative text appear like a tooltip. From my search, I found out, to have a tooltip for a picture, the "title" must be add to the class "image". As an example :

Code: Select all

<img class="- topic/image image imagecenter break zoom" id="diff_image_sl5_j3y_fyb"  src="../graphics/images.png" width="550" alt="alternative text" title="alternative text">

My question is how can I add title attribute to class image to add a tooltip with title text to the image as shown in the example in oxygen xml author?
I use DITA as an authoring tool and our output is done with oxygen Webhelp responsive.
Best regards,
Sitraka

[marius]

Hi,
You can wrap the <image> element in a <fig> element and add also a <desc>. Something like this:

Code: Select all

<p>
  <fig>
    <desc>This should be displayed as tooltip</desc>
    <image href="../../images/Iris_sanguinea.jpg"/>
  </fig>
</p>

The <desc> element goes in the html output as <figcaption>, which can be further customized to be displayed as tooltip thru CSS.
The CSS customization in WebHelp is described here and you can use this example as a starting point.

Best regards,
Marius

[Sitrakar]

Thanks Marius,
I will try it.
So there is no solution to add title as an attribute for an image?
Best regards,
Sitraka

[marius]

Hi,
The @title attribute is not a valid attribute for the <image> element in DITA, therefore even if is present, is ignored during transformation to WebHelp and it will not appear in the output.

Best regards,
Marius

[Sitrakar]

Thanks Marius for all the information.
Best regards,
Sitraka

[Sitrakar]

So after a long digging, I found out how to put an attribute title on an image. For that, I create a javascript to do it.
First, I create an outputclass on my CSS :

Code: Select all

.tooltipalt {
    position: relative;
}

then I create a javascript code :

Code: Select all

<script type="text/javascript">
 <!-- 
    Array.prototype.forEach.call(document.getElementsByClassName("topic/image image imagecenter tooltipalt"), function(el){
        tooltip = $('*[class ~= "topic/image"]').attr('alt');
        $('.tooltipalt').attr('title', tooltip);
        
        $('.displaytitle').html($('.tooltipalt').attr('title'));       
    })
 -->
</script>

And I call it on my Webhelp output (.opt) with

Code: Select all

        <html-fragments>
            <fragment placeholder="webhelp.fragment.after.main.content.area" file="html-fragments/title-attribute.xml"/>
        </html-fragments>

and the results is like this one :

Code: Select all

<img class="- topic/image image imagecenter tooltipalt break zoom" id="diff_image_sl5_j3y_fyb" src="../graphics/images.png" width="550" alt="test" title="test">

And the tooltip work on the image.
But this work if you have just one picture on your page. Is there a way to make it for more than one pictures?