Hover over text
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.
Thanks.
Answers
-
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.
-
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.
-
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.
-
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.
