Any link to an article within the world can display a tooltip on hover. This is useful to give the reader a little extra context about what the link is about. It can serve to provide enough context to understand something without having to follow the link to understand what they are reading. Or to entice them to check out the content behind the link. How you use them is up to you, but in this article we will cover what the options are and how to implement them.
Excerpts
This feature is available to
everyone.
The excerpt is a small tooltip that appears when you hover over any article link. It can be up to 256 characters long and does not support any BBCode. This field can be edited in the
article editor design tab and in the
article manager on the right sidebar, when selecting an article.
Article Previews
This feature is available to
Master, Grandmaster and
Sage guild members.
The article preview displays a large tooltip with the article's cover image, title, subheading, and content field. No other fields are displayed, including the credit field that appears between an article's headline and content field.
When using
visibility toggles and the article previews together, it is important to not have any toggles in the main content field of the article as the article previews ignore the toggles state and display the hidden text to everyone. Alternatively use
Subscriber Containers as their privacy status is respected in the article preview.
View a full example with all fields by hovering this
link.
At the bottom of each preview is a link to the full article. This does not prevent the user from clicking directly on the link to view the full article.
Customizing the Preview - Mousover Snippet
It is possible to fully customize what the preview shows using the Mouseover Snippet. This is a field available in all article templates on the Design tab, just below the excerpt. Unlike the excerpt, this field has full BBCode support. For the mouseover snippet to display anything, article previews must be enabled. The mouseover snippet is not shown when the article is private and there is no way to enable this.
To view an example hover over this
link.
Other Tooltip Options
World Anvil offers two additional ways to create tooltips. There is a BBCode [tooltip] and variables. Check out the articles below to learn more about them.
Tooltip BBCode
Variables
Is there a way to disable the header image from appearing in the tooltip? I unchecked the "Display Block Headers" option in my world settings, but it doesn't seem to remove the image from the tooltips.
Hello! You can suppress it one of two ways! First, is to set a rule on your world css to display:none the following selector .tooltipster-content img:first-child. Second, and more time consuming but rewarding, is to use edit the contents of the mouseover snippet box of each article's design tab, as that overrides what shows up in tooltipster.
Check out my summercamp by going here and checking out any of my gold-star articles!
Awesome! That worked perfectly. I may try out the mouseover snippet later on, but I really like being able to see my vignette in a pop-up :) Thank you for your help!