Creating triggers within text

Dec 15, 2020

My project is largely based on dialogue bubbles between two characters, and sometimes I want to underline a word or phrase in the dialogue bubble and let learners click on it to reveal a new layer with more information. So I added triggers using either cntrl+k or by right clicking and selecting hyperlink, and then turned the font color white to match the rest of the text since the hyperlink blue doesn't show up well within the dialogue bubble.

But then when I hover over the text after publishing, both the hyperlinked part and a few words after it get highlighted. Or, in some cases, nothing gets highlighted at all, even though those triggers were built the same way as the over-highlighted ones.

Ideally, when you hover over the underlined text, just that text would get highlighted like a normal link would.

Thanks!

3 Replies

Sarah Nechamen
Author

over 3 years ago12/15/20 at 8:32 pm (UTC)

I've attached my file. An example of a slide with overhighlighted text is 1.10. An example of a slide with no highlight is 2.7. The project can also be seen at https://360.articulate.com/review/content/ea9cc1ce-bd32-40dd-82a0-5664263e7026/review. Thanks!

Articulate_IET_12.14.story

Ren Gomez
Staff

over 3 years ago12/18/20 at 5:57 pm (UTC)

Hi Sarah,

Thanks for reaching out and sharing your file! After taking a closer look, it seems that changing the default color of the hyperlink to the same color as the other text is what's causing the hover issue to occur.

I'd like to have our team take a closer look at this, so I've opened a case on your behalf. They'll determine the best path forward and reach back out.

In the meantime, here are a couple of options to consider:

If you choose an off-white color different from your text, it will help with the hover state and provide an accent to make the text stand out even more!
Remove the rectangle covering the text so that the hyperlink works as intended.

Sarah Nechamen
Author

over 3 years ago12/18/20 at 6:11 pm (UTC)

Thanks for looking into this! I've found a workaround in the meantime using hover states to create the desired highlighting effect, but I would still be curious to see what else your team comes up with. And it's definitely helpful to know that it was the color that was causing the problem!

I can't remove the rectangle unfortunately, because that is how I make the links viewable by screen readers. Without the extra object there that I can add alt text to, I'm not sure how someone using a screen reader would interact with an in-text link.

One other note: I didn't notice this problem until after I installed the latest Storyline update. It's possible I just missed it before, but I tested the module pretty extensively so it seems unlikely.