Glossary word popover

[melissasamworth]

Update (12 Feb)

• The popover is there, but it isn't styled like the new design yet

Acceptance criteria

• The first instance of a glossary term in an article will show the grey underline
• Hover over that word reveals a popover, which includes
  • Glossary term
  • Definition (make a note to writers to cap the definition at N number of character; not sure what this would be honestly since different characters have different widths)
  • Link to article page (sometimes exists sometimes doesn't)
  • Image (optional)
  • Min size of 202px width and 304px height (at the least just put a note to uploaders to make sure image is at least this size, perhaps in Coda)
  • If image is larger than this, crop it either vertically centered or horizontally centered

Link https://www.figma.com/file/qqfeYAh6Z7QdyJXsQjIUfh/Stampy?type=design&node-id=2073%3A8816&mode=dev&t=5zH2EaswPLkKJBPS-1

[melissasamworth]

@mruwnik

Can you make it so the word is not repeated twice?

In cases like "agentic" can you just make the word "agent" show?

I also want it to appear under the word rather than to the right, and some styling fixes but I think I can probably fix all that.

[mruwnik]

That's mainly a copy issue, see the glossary doc. Each glossary item has a main phrase and aliases, all of which will be underlined. Do you always want the main phrase to be the bold word, even if a different word is underlined in the main text?

[melissasamworth]

Update:

• Editors will upload exact right photo size
• Re: copy length, added ellipses if it gets too long
  • Ask editors to keep things at a certain length too

[melissasamworth]

Melissa get in touch with copy

[melissasamworth]

Update: Use term instead of alias

[melissasamworth]

Update: the term looks right, just checking to make sure the ellipsis will appear

Then just a few small styling things

(sorry)

[melissasamworth]

Why is the line height off? Did you use the class .paragraph-small? (sorry, line height is one thing I'm a bit of a perfectionist about)

[melissasamworth]

also seems more text appears after the ellipsis

[melissasamworth]

update: Melissa fix line height

[melissasamworth]

update: last issue is just that there is a bug on brave where there is more text after the ellipsis