Page 1 of 1
Add title attribute to class image to add a tooltip with title text to the image
Posted: Tue Aug 22, 2023 6:45 pm
by 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
Re: Add title attribute to class image to add a tooltip with title text to the image
Posted: Wed Aug 23, 2023 4:26 pm
by 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
Re: Add title attribute to class image to add a tooltip with title text to the image
Posted: Wed Aug 23, 2023 6:51 pm
by Sitrakar
Thanks Marius,
I will try it.
So there is no solution to add title as an attribute for an image?
Best regards,
Sitraka
Re: Add title attribute to class image to add a tooltip with title text to the image
Posted: Thu Aug 24, 2023 11:34 am
by 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
Re: Add title attribute to class image to add a tooltip with title text to the image
Posted: Mon Aug 28, 2023 4:40 pm
by Sitrakar
Thanks Marius for all the information.
Best regards,
Sitraka
Re: Add title attribute to class image to add a tooltip with title text to the image
Posted: Tue Aug 29, 2023 10:07 pm
by 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?