1

I was sort of shocked to learn that tooltips in svg images don't display when an image is part of an html page inside a <img > tag.

I found a reference with some options; https://stackoverflow.com/a/28917577/8980882. Here <object> </object> tag can be used. The <iframe> </iframe>. option seems less nice in my basic testing on chrome and safari.

I am using antora to build documentation and the svg images have a lot of information in the tooltips to reduce the noise of an image. Here is an example; https://docs.arch2code.org/a2c-docs/latest/exampleArchitecture.html. I have to warn that this link my change or become obsolete over time it is just a sample document setup at this point. The second svg if you right click and open in a new tab has lots of tool tips.

My question is, is there some css edits that I can make, or supplemental-ui files I can add to my antora setup to get images to be linked via <object> tags instead of <img> tags? I also would really like these to use a width of 100% which seems less obvious for <object> tags.

I am a novice at css, html and antora so this might be easy for someone but very non obvious to me.

These lines of css in the antora-ui might be what can be over-ridden or re-written?

https://gitlab.com/antora/antora-ui-default/-/blob/master/src/css/doc.css#L435-440

I was naively expecting HTML to pass the tool tips up from svg images.

Thank you for any help.

jj2f1
  • 300
  • 1
  • 7
  • If your doc system automatically creates img tags: You can either edit the doc system's source (if they give you the ability to modify a template for example) or use javascript to loop through the SVG images and replace them with the object version. – imvain2 Mar 06 '23 at 23:19
  • @imvain2, I'm hoping to get an edit to the generating code, [antora](https://antora.org), by a supplemental-ui and some css. I just lack the skill. There might be other options. And yeah, I could post process but would rather not and the `width=100%` I'm not sure how to do in a post processing manor on `` tags. – jj2f1 Mar 06 '23 at 23:35

1 Answers1

0

I got an answer on antora.zulipchat.com from another user. The answer is an option that is already present in asciidoc and usable in antora.

The solution is to use opts=interactive in the image tags, see https://docs.asciidoctor.org/asciidoc/latest/macros/image-svg/#options-for-svg-images

So before my images image::sample.svg[Name,width=100%]. Now they are image::sample.svg[Name,opts=interactive,width=3072].

The opts=interactive is the solution and the width=3072 expands the svg up to that size if the page is sized up that large. So the second part is more of a max size than allowing the image to expand up to its full size when the page size increases. These image types scale well so that workaround is working nicely. No need for any css code.

jj2f1
  • 300
  • 1
  • 7