search

mobilehugh / EXP_Documents

Sciency fiction table top RPG documentation. Asciidoc to HTML site generation using Antoradocs.
https://expgame.com
1 stars 0 forks source link

Force img alt or title to balloon over image. #7

Closed mobilehugh closed 4 years ago

mobilehugh commented 4 years ago

Only way to clearly present the artist name, date, and license.

mobilehugh commented 4 years ago

Turns out that this is a feature of CSS3. there are ways to have text on hover. Trying a few ^C^V first.

mobilehugh commented 4 years ago

ended up doing a total hack that seems easier to work with in the end. Used the inline image macro and styled it as .imageblock. Then styled the snark as .imageblock. Seems clunky but much more human readable in the .adoc

Added for each image in every asciidoc.

:art: feline.png
:width: 250px
:snark: A catsi tab.
:artist: Michael Jackson
:date: 1991
:license: CC BY-SA 4.0

include::ROOT:partial$articulate.adoc[]

articulate.adoc is located in ROOT/partials

// this is for inserting art
// attributes are set in the referring adoc
// using inline image because it allows tooltip 
// centering by assigning imageblock css

[.imageblock.inlinefix]
image:ROOT:{art}[width="{width}", alt='{art}-{artist}-{license}', title='Artist: {artist} Date: {date} License: {license}']

[.imageblock]
*{snark}*

// removing the attributes to avoid polluting next image 
:art:
:width:
:snark:
:artist:
:date:
:license: