Add fcnt shortcode for tooltips

ACTIONS.md

@@ -601,7 +601,8 @@ Fires outside the `#site` container and before the `wp_footer` hook, near the en
 * $breadcrumbs (array) – Array of breadcrumb tuples with label (0) and link (1).
 
 **Hooked Actions:**
-* `fictioneer_output_modals( $args )` – Render modals based on login status and page type. Priority 10.
+* `fictioneer_output_modals( $args )` – Renders modal HTML based on login status and page type. Priority 10.
+* `fictioneer_render_tooltip_dialog_modal_html()` – Renders dialog HTML for the tooltip modal. Priority 10.
 * `fictioneer_mu_registration_start( $args )` – Start of the wrapper HTML for wp-signup/wp-activate. Priority 999.
 
 ---

DOCUMENTATION.md

@@ -1427,6 +1427,20 @@ Renders the theme sidebar (not displayed anywhere by default). Requires the "Dis
 [fictioneer_sidebar name="other-sidebar"]
 ```
 
+### Tooltip (Modal)
+
+Includes a tooltip modal for the wrapped content, indicated by a dotted underline. Just omit the shortcode block and write it directly into the text. You can format words or phrases inside the tooltip content as \***bold**\* or \_*italic*\_, and escape the special characters with a prefixed `$` sign (WP sanitized backslashes). This shortcode also works if your role lacks the shortcode capability.
+
+```
+[fcnt content="This is a note."]note[/fcnt]
+```
+
+```
+[fcnt header="Are you dense?" content="This _typically_ refers to forms that are either literal *skeletons* or the underlying bearing $*structure* of objects."]skeletal shapes[/fcnt]
+```
+
+![Showcase](repo/assets/fcnt_example.jpg?raw=true)
+
 ## Elementor
 
 If you have the Elementor plugin installed, consider using the [Fictioneer 002 Elementor Control](https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#recommended-must-use-plugins) plugin if you only need it for the Canvas page templates. If you have the Pro version and want to use the theme builder, this may not be an option, but you can customize the following locations: `header`, `footer`, `nav_bar`, `nav_menu`, `mobile_nav_menu`, `story_header`, and `page_background`.

includes/functions/_setup-roles.php

@@ -1005,6 +1005,7 @@ if ( ! current_user_can( 'manage_options' ) ) {
    * Exempts shortcodes from being removed by strip_shortcodes()
    *
    * @since 5.14.0
+   * @since 5.25.0 - Allowed 'fcnt' shortcode to pass.
    *
    * @param array $tags_to_remove  Tags to be removed.
    *
@@ -1013,11 +1014,16 @@ if ( ! current_user_can( 'manage_options' ) ) {
 
 
   function fictioneer_exempt_shortcodes_from_removal( $tags_to_remove ) {
-    // Remove shortcodes from tags
+    // Remove 'fictioneer_fa' shortcode from tags
     if ( ( $key = array_search( 'fictioneer_fa', $tags_to_remove ) ) !== false ) {
       unset( $tags_to_remove[ $key ] );
     }
 
+    // Remove 'fcnt' shortcode from tags
+    if ( ( $key = array_search( 'fcnt', $tags_to_remove ) ) !== false ) {
+      unset( $tags_to_remove[ $key ] );
+    }
+
     // Continue filter
     return $tags_to_remove;
   }

includes/functions/_setup-shortcodes.php

@@ -2311,3 +2311,67 @@ function fictioneer_shortcode_sidebar( $attr ) {
 if ( ! get_option( 'fictioneer_disable_all_widgets' ) ) {
   add_shortcode( 'fictioneer_sidebar', 'fictioneer_shortcode_sidebar' );
 }
+
+// =============================================================================
+// TOOLTIP SHORTCODE
+// =============================================================================
+
+/**
+ * Shortcode to add tooltip modal
+ *
+ * @since 5.25.0
+ *
+ * @param string $atts['header']   Optional. Header of the tooltip.
+ * @param string $atts['content']  Content of the tooltip.
+ *
+ * @return string The shortcode HTML.
+ */
+
+function fictioneer_shortcode_tooltip( $atts, $content = null ) {
+  // Setup
+  $data = '';
+  $attributes = shortcode_atts(
+    array( 'header' => '', 'content' => '' ),
+    $atts,
+    'fcnt'
+  );
+
+  // Sanitize
+  $modal_header = trim( wp_kses_post( $attributes['header'] ) );
+  $modal_header = esc_attr( $modal_header );
+
+  $modal_content = trim( wp_kses_post( $attributes['content'] ) );
+  $modal_content = esc_attr( $modal_content );
+
+  // Tooltip content?
+  if ( empty( $modal_content ) ) {
+    return $content;
+  }
+
+  // Escaped markdown (WP strips slashes, so we use $ as escape character)
+  $modal_content = str_replace( '$*', '$ESCAPED_ASTERISK$', $modal_content );
+  $modal_content = str_replace( '$_', '$ESCAPED_UNDERSCORE$', $modal_content );
+
+  // Convert _text_ to <em>text</em>
+  $modal_content = preg_replace( '/_(.*?)_/', '<em>$1</em>', $modal_content );
+
+  // Convert *text* to <b>text</b>
+  $modal_content = preg_replace( '/\*(.*?)\*/', '<b>$1</b>', $modal_content );
+
+  // Cleanup
+  $modal_content = str_replace( '$ESCAPED_ASTERISK$', '*', $modal_content );
+  $modal_content = str_replace( '$ESCAPED_UNDERSCORE$', '_', $modal_content );
+
+  // Build attributes
+  if ( ! empty( $modal_header ) ) {
+    $data .= 'data-dialog-header="' . esc_attr( $modal_header ) . '" ';
+  }
+
+  $data .= 'data-dialog-content="' . esc_attr( $modal_content ) . '"';
+  $title = _x( 'Click to see note', 'Tooltip shortcode.', 'fictioneer' );
+
+  // Return HTML
+  return '<a class="modal-tooltip" title="' . $title . '" ' . $data . ' data-click-action="open-tooltip-modal">' .
+    $content . '</a>';
+}
+add_shortcode( 'fcnt', 'fictioneer_shortcode_tooltip' );

includes/functions/hooks/_general_hooks.php

@@ -1208,3 +1208,26 @@ function fictioneer_cleanup_discord_meta() {
   }
 }
 add_action( 'wp_head', 'fictioneer_cleanup_discord_meta' );
+
+// =============================================================================
+// TOOLTIP DIALOG
+// =============================================================================
+
+/**
+ * Outputs the HTML for the tooltip dialog modal
+ *
+ * @since 5.25.0
+ */
+
+function fictioneer_render_tooltip_dialog_modal_html() {
+  // Start HTML ---> ?>
+  <dialog class="dialog-modal" id="fictioneer-tooltip-dialog">
+    <div class="dialog-modal__wrapper">
+      <button class="dialog-modal__close" data-click-action="close-dialog-modal" aria-label="<?php esc_attr_e( 'Close modal', 'fictioneer' ); ?>"><?php fictioneer_icon( 'fa-xmark' ); ?></button>
+      <div class="dialog-modal__header" data-finder="tooltip-dialog-header"><?php _ex( 'Note', 'Default tooltip modal header.', 'fictioneer' ); ?></div>
+      <div class="dialog-modal__row dialog-modal__description _tooltip _small-top" data-finder="tooltip-dialog-content"></div>
+    </div>
+  </dialog>
+  <?php // <--- End HTML
+}
+add_action( 'fictioneer_footer', 'fictioneer_render_tooltip_dialog_modal_html' );

src/js/application.js

@@ -1607,7 +1607,7 @@ _$$('[data-click-action*="open-dialog-modal"]').forEach(element => {
 });
 
 // Close dialog modal
-_$$('[data-click-action*="close-dialog-modal"]').forEach(element => {
+_$$('[data-click-action*="close-dialog-modal"], button[formmethod="dialog"][value="cancel"]').forEach(element => {
   element.addEventListener('click', event => {
     event.preventDefault();
     event.target.closest('dialog').close();
@@ -1624,6 +1624,26 @@ _$$('dialog').forEach(element => {
   });
 });
 
+// Open tooltip modal
+_$('.content-section')?.addEventListener('click', event => {
+  if (event.target.closest('[data-click-action*="open-tooltip-modal"]') && !window.getSelection().toString()) {
+    const modal = _$$$('fictioneer-tooltip-dialog');
+    const header = event.target.dataset.dialogHeader;
+    const content = event.target.dataset.dialogContent;
+
+    if (content.length > 200) {
+      modal.style = '--modal-width: 400px;';
+    }
+
+    if (header) {
+      modal.querySelector('[data-finder="tooltip-dialog-header"]').innerHTML = header;
+    }
+
+    modal.querySelector('[data-finder="tooltip-dialog-content"]').innerHTML = content;
+    modal.showModal();
+  }
+});
+
 // =============================================================================
 // KEYBOARD INPUTS
 // =============================================================================

src/scss/common/_formatting.scss

@@ -62,8 +62,8 @@ img {
   }
 }
 
-p a:not(.wp-element-button),
-.content-section :is(.wp-block-table, .wp-block-pullquote, .wp-block-list) a:not(.wp-element-button),
+p a:not(.wp-element-button, .modal-tooltip),
+.content-section :is(.wp-block-table, .wp-block-pullquote, .wp-block-list) a:not(.wp-element-button, .modal-tooltip),
 .link {
   color: var(--inline-link-color);
   border-bottom: var(--inline-link-color-border);
@@ -83,6 +83,16 @@ p a:not(.wp-element-button),
   }
 }
 
+a.modal-tooltip {
+  cursor: help;
+  text-decoration: underline var(--fg-900) dotted 1px;
+  text-underline-offset: 0.15em;
+
+  &:hover {
+    text-decoration-color: currentColor;
+  }
+}
+
 .esc-link a:not(.link) {
   color: inherit;
 

src/scss/common/_setup.scss

@@ -80,11 +80,11 @@ article {
   contain: layout style; // Improve performance
 }
 
-:root a:where(:not(.wp-element-button)):is(a) {
+:root a:where(:not(.wp-element-button, .modal-tooltip)):is(a) {
   text-decoration: none; // WP bullshit
 }
 
-a:where(:not(.button, .wp-element-button)) {
+a:where(:not(.button, .wp-element-button, .modal-tooltip)) {
   cursor: pointer;
   color: var(--layout-link-color);
   text-decoration: none;