Hover over text

Fiona.J.595 Posts: 2 🔍
edited March 2023 in Customer Enablement

Is it possible to hoverover/mouseover a word in text and have a definition appear? We are creating a lot of technical courses and would like students to be able to quickly access definitions for (potentially) a lot of unfamiliar words.


  • Aasim.Y.704
    Aasim.Y.704 Posts: 129 ⏸️ Inactive

    Hi @Fionakiwi,

    Great question! After doing some research, I believe that one possible way of enabling a "mouse over" effect into courses would be to edit the affected file's HTML.

    This would require gathering specific HTML code that would allow the "hover" feature to display a definition when users place their mouse on top of a word. Once acquired, individuals who would like this feature would need to place it into the HTML editor of the Content File desired (see screenshot attached). It would need to be added in and repeatedly modified for the code to pick up on the desired words and display the respective definitions.

    I wish I were able to give you the exact coding script, but hopefully this points you in the right direction towards enabling those definition pop-ups!

    Let me know if you have any further questions.

  • Fiona.J.595
    Fiona.J.595 Posts: 2 🔍

    Thanks for your advice, Aasim. Unfortunately, I'm a learning designer not a programmer, so I don't know code. Someone else at work might, but I thought it would be a commonly needed feature for online learning and so there'd be a fairly simple way to achieve it.

  • Jennifer.W.973
    Jennifer.W.973 Posts: 242 🌟

    The quickest way to do this is to just add a title attribute to the HTML element, such as a paragraph or abbreviation. It is not the most accessible way of adding tooltips, however, and you would need to add more styling to make it obvious that the user should hover over it.

  • Arman.V.176
    Arman.V.176 Posts: 20 🌱
    edited June 2023

    You can indeed accomplish this very quick by adding a title attribute. However, I found out that the title pop-ups aren't really shown on mobile devices. Alternatively, you can activate Bootstrap's tooltips, assuming you're using the HTML Daylight templates which are based on the Bootstrap framework. These tooltips are also shown on touch devices when you press the respective element. But like @Jennifer.W.973 said, you have to add extra styling to show users that some kind of action can be performed.

    More information on Bootstrap's tootips can be found on Bootstrap's Tooltip information page.