Skip to main content

Tooltips & Tooltip Shells

To standardise how tooltip elements are rendered on Deserted Chateau, and avoid janky page loading, many tooltips are rendered server-side before being sent to the client.

Tooltip Shells

The Frontend/DynamicContent.php class handles including tooltip "shells" on a page, using the Frontend/Includes/Tooltips/StandardTooltip.php class to render a tooltip element that normally looks like a circle with an info symbol inside. 

Tooltip shells have a few parameters that can be set, to determine the icon classes and other appearance attributes for the tooltip. There are also preset templates that can be used. Tooltip shells differ from standard tooltips in that they are adjustable before being sent to the client, whereas standard tooltips are written into the HTML of a page and can't be changed server-side.

Commonly-used tooltip shell presets are recorded as "templates" in the configuration_tooltip_templates database table, and cached with the SITE:::CONFIGURATION:::TOOLTIPTEMPLATES redis key.

Example usage
<!-- Includes the tooltip shell's HTML. -->
<?php DynamicContent::includeTooltipShell("use-nsfw-banner-option"); ?>

<!-- Defines the content of the tooltip. Note that the "data-tooltip-name" attribute must match the
name given to the DynamicContent::includeTooltipShell function. -->
<div class="standard-tooltip-shell-content-container" data-tooltip-name="use-nsfw-banner-option">
	<div class="standard-tooltip-content-paragraph">
		You can upload an NSFW profile banner that displays to users who are both logged in, and have enabled viewing NSFW banners automatically. Otherwise, your SFW banner will be shown instead.
	</div>
</div>
Client-side initialisation

To make the tooltips functional, we need to invoke Tippy on them. The TooltipManager.js class handles initialisation of tooltips; the initialiseStandardShellTooltips method initialises all shell tooltips on the page that are not already initialised.

Standard Tooltips

Standard tooltips have fixed content, that isn't adjustable by server-side code, and as such involve no PHP.

Example usage
<!-- Defines the content to appear when the tooltip is hovered. -->
<div id="settings-account-change-account-types-commissioner-option-tooltip-content" class="standard-tooltip-icon-content">
    <div class="standard-tooltip-content-inner-container">
        <div class="standard-tooltip-content-paragraph">
            Commissioner accounts can submit artworks, but must always declare the original artist of the artwork.
        </div>
        <div class="standard-tooltip-content-paragraph">
            When you have the Artist and Commissioner roles, you can submit your own artwork and artworks you commissioned from others, but must declare the original artist for those commissions.   
        </div>
    </div>
</div>
<!-- Defines the appearance for the tooltip's icon button. -->
<span class="fa-stack fa-2x standard-tooltip-icon-span standard-tooltip-identifier-class" tabindex="0" id="settings-account-change-account-types-commissioner-option-tooltip" aria-expanded="false">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i> 
</span>
Artwork Category & Navigation Settings tooltip HTML formatting

To simplify modifying the text for these tooltips in the database (in the artwork_categories table), the ArtworkCategoriesDB::getArtworkCategoriesList function accepts an optional parameter $format which defaults to true. When $format is true, the text for those tooltips is formatted to be encased within <div class="standard-tooltip-content-paragraph"> containers, with newlines between the text removed and replaced with said containers, so that they are formatted correctly when shown by Tippy.js.

Back to top