Skip to main content

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.

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.

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.

Back to top