Footnote hover

[melissasamworth]

Acceptance criteria

• Footnote superscripts have no brackets (already done)
• They are the standard green color
• When user hovers over the number, show the footnote hover
  • Style should match design
• When user clicks the number, scroll down so that the start of the footnote is at the top of the user's screen
• For mobile, do the same as for the reference hovers in the chabot
  • The acceptance criteria for this:
    When user taps on a reference number in a bot response, the position of the page shifts so that the number tapped is 16px from the top of the screen, and the popover is below it
    Clicking anywhere outside the popover closes it out, until then keep it open
    If the popover goes past the length the screen, make sure user can scroll and still read the whole thing
    Note that there may be an issue if the number is at the end and the popover is very long. I'm hoping with the additional questions at the bottom creating space, this doesn't happen often. So ignore this edge case for now.

Note that this task was created for the bot, but ideally it addresses the entire site

LInks
Figma

[bryceerobertson]

@mruwnik I think these should all be the normal green

[bryceerobertson]

@zarSou9 the footnote numbers are still showing up as multicolored for me?

[zarSou9]

I think the multicolored is good. It helps differentiate between footnotes, and it looks pretty imho

[bryceerobertson]

Fair enough, better let @melissasamworth have the final say though.

[mruwnik]

I also like the colours, for the same reasons