Constants
3 weeks ago
Accordion.php
1 week ago
Alert.php
1 week ago
AttachmentCard.php
1 week ago
Avatar.php
1 week ago
Badge.php
1 week ago
BaseComponent.php
3 weeks ago
Button.php
1 week ago
ConfirmationModal.php
1 week ago
CourseFilter.php
1 week ago
DateFilter.php
1 week ago
DropdownFilter.php
1 week ago
EmptyState.php
1 week ago
FileUploader.php
1 week ago
InputField.php
1 week ago
Modal.php
1 week ago
Nav.php
1 week ago
Pagination.php
1 week ago
Popover.php
1 week ago
PreviewTrigger.php
1 week ago
Progress.php
1 week ago
SearchFilter.php
1 week ago
Sorting.php
1 week ago
StarRating.php
1 week ago
StarRatingInput.php
1 week ago
StatusSelect.php
1 week ago
SvgIcon.php
1 week ago
Table.php
1 week ago
Tabs.php
1 week ago
Tooltip.php
1 week ago
WPEditor.php
1 week ago
Tooltip.php
347 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Tutor Component: Tooltip |
| 4 | * |
| 5 | * Provides a fluent builder for rendering tooltips with |
| 6 | * different placements, sizes, and triggers. |
| 7 | * |
| 8 | * @package Tutor\Components |
| 9 | * @author Themeum |
| 10 | * @link https://themeum.com |
| 11 | * @since 4.0.0 |
| 12 | */ |
| 13 | |
| 14 | namespace Tutor\Components; |
| 15 | |
| 16 | defined( 'ABSPATH' ) || exit; |
| 17 | |
| 18 | use Tutor\Components\Constants\Size; |
| 19 | |
| 20 | /** |
| 21 | * Tooltip Component Class. |
| 22 | * |
| 23 | * Example usage: |
| 24 | * ```php |
| 25 | * // Basic tooltip on hover (top placement, default) |
| 26 | * Tooltip::make() |
| 27 | * ->content( 'This is a helpful tip.' ) |
| 28 | * ->trigger_element( '<button class="tutor-btn tutor-btn-ghost">Hover me</button>' ) |
| 29 | * ->render(); |
| 30 | * |
| 31 | * // Tooltip with specific placement and size |
| 32 | * Tooltip::make() |
| 33 | * ->content( 'Detailed information here.' ) |
| 34 | * ->placement( Tooltip::PLACEMENT_BOTTOM ) |
| 35 | * ->size( Size::LARGE ) |
| 36 | * ->trigger_element( '<span class="tutor-icon-wrapper">' . SvgIcon::make()->name( Icon::INFO )->size( 16 )->get() . '</span>' ) |
| 37 | * ->render(); |
| 38 | * |
| 39 | * // Tooltip triggered on focus (keyboard accessible) |
| 40 | * Tooltip::make() |
| 41 | * ->content( 'This field requires a valid email.' ) |
| 42 | * ->trigger_on( Tooltip::FOCUS ) |
| 43 | * ->placement( Tooltip::PLACEMENT_TOP ) |
| 44 | * ->trigger_element( '<input type="email" class="tutor-input" name="email">' ) |
| 45 | * ->render(); |
| 46 | * |
| 47 | * // Tooltip triggered on click |
| 48 | * Tooltip::make() |
| 49 | * ->content( 'Copied to clipboard!' ) |
| 50 | * ->trigger_on( Tooltip::CLICK ) |
| 51 | * ->placement( Tooltip::PLACEMENT_END ) |
| 52 | * ->trigger_element( '<button class="tutor-btn tutor-btn-outline">Copy</button>' ) |
| 53 | * ->render(); |
| 54 | * |
| 55 | * // Tooltip with arrow alignment (centered) |
| 56 | * Tooltip::make() |
| 57 | * ->content( 'Centered arrow tip.' ) |
| 58 | * ->arrow( Tooltip::ARROW_CENTER ) |
| 59 | * ->placement( Tooltip::PLACEMENT_TOP ) |
| 60 | * ->trigger_element( '<span>Hover</span>' ) |
| 61 | * ->render(); |
| 62 | * |
| 63 | * // Tooltip with custom offset distance |
| 64 | * Tooltip::make() |
| 65 | * ->content( 'Offset from trigger by 16px.' ) |
| 66 | * ->offset( 16 ) |
| 67 | * ->trigger_element( '<button class="tutor-btn">Info</button>' ) |
| 68 | * ->render(); |
| 69 | * |
| 70 | * // Tooltip with show/hide delay |
| 71 | * Tooltip::make() |
| 72 | * ->content( 'Appears after 300ms, hides after 200ms.' ) |
| 73 | * ->delay( 300, 200 ) |
| 74 | * ->trigger_element( '<span>Hover me</span>' ) |
| 75 | * ->render(); |
| 76 | * |
| 77 | * // Tooltip with rich HTML content |
| 78 | * Tooltip::make() |
| 79 | * ->content( '<strong>Tip:</strong> Use <em>keyboard shortcuts</em> to save time.', array( 'strong' => array(), 'em' => array() ) ) |
| 80 | * ->placement( Tooltip::PLACEMENT_BOTTOM ) |
| 81 | * ->trigger_element( '<span>' . SvgIcon::make()->name( Icon::QUESTION_CIRCLE )->size( 16 )->get() . '</span>' ) |
| 82 | * ->render(); |
| 83 | * |
| 84 | * // Tooltip placed at start (left in LTR) |
| 85 | * Tooltip::make() |
| 86 | * ->content( 'Left-side tooltip.' ) |
| 87 | * ->placement( Tooltip::PLACEMENT_START ) |
| 88 | * ->trigger_element( '<button class="tutor-btn">Start</button>' ) |
| 89 | * ->render(); |
| 90 | * |
| 91 | * // Retrieve HTML without echoing |
| 92 | * $html = Tooltip::make()->content( 'Save your work' )->trigger_element( $btn_html )->get(); |
| 93 | * ``` |
| 94 | * |
| 95 | * @since 4.0.0 |
| 96 | */ |
| 97 | class Tooltip extends BaseComponent { |
| 98 | |
| 99 | /** |
| 100 | * Placement constants. |
| 101 | */ |
| 102 | public const PLACEMENT_TOP = 'top'; |
| 103 | public const PLACEMENT_BOTTOM = 'bottom'; |
| 104 | public const PLACEMENT_START = 'start'; |
| 105 | public const PLACEMENT_END = 'end'; |
| 106 | |
| 107 | /** |
| 108 | * Arrow alignment constants. |
| 109 | */ |
| 110 | public const ARROW_START = 'start'; |
| 111 | public const ARROW_CENTER = 'center'; |
| 112 | public const ARROW_END = 'end'; |
| 113 | |
| 114 | /** |
| 115 | * Trigger constants. |
| 116 | */ |
| 117 | public const HOVER = 'hover'; |
| 118 | public const CLICK = 'click'; |
| 119 | public const FOCUS = 'focus'; |
| 120 | |
| 121 | /** |
| 122 | * Tooltip content (HTML or text). |
| 123 | * |
| 124 | * @var string |
| 125 | */ |
| 126 | protected $content = ''; |
| 127 | |
| 128 | /** |
| 129 | * Tooltip placement (top|bottom|start|end). |
| 130 | * |
| 131 | * @var string |
| 132 | */ |
| 133 | protected $placement = self::PLACEMENT_TOP; |
| 134 | |
| 135 | /** |
| 136 | * Tooltip size (small|medium|large). |
| 137 | * |
| 138 | * @var string |
| 139 | */ |
| 140 | protected $size = Size::SMALL; |
| 141 | |
| 142 | /** |
| 143 | * Arrow alignment (start|center|end). |
| 144 | * |
| 145 | * @var string |
| 146 | */ |
| 147 | protected $arrow = self::ARROW_START; |
| 148 | |
| 149 | /** |
| 150 | * Tooltip trigger type (hover|focus|click). |
| 151 | * |
| 152 | * @var string |
| 153 | */ |
| 154 | protected $trigger = self::HOVER; |
| 155 | |
| 156 | /** |
| 157 | * The element that triggers the tooltip. |
| 158 | * |
| 159 | * @var string |
| 160 | */ |
| 161 | protected $trigger_element = ''; |
| 162 | |
| 163 | /** |
| 164 | * Distance from the trigger in pixels. |
| 165 | * |
| 166 | * @var int |
| 167 | */ |
| 168 | protected $offset = 8; |
| 169 | |
| 170 | /** |
| 171 | * Delay in milliseconds for showing/hiding. |
| 172 | * |
| 173 | * @var array |
| 174 | */ |
| 175 | protected $delay = array( |
| 176 | 'show' => 0, |
| 177 | 'hide' => 0, |
| 178 | ); |
| 179 | |
| 180 | /** |
| 181 | * Set and sanitize the tooltip content. |
| 182 | * |
| 183 | * @param string $content HTML or text content. |
| 184 | * @param array<string, array<string, bool>> $extra_tags Optional. |
| 185 | * Additional HTML tags and attributes in KSES-compatible format. |
| 186 | * |
| 187 | * @return $this |
| 188 | */ |
| 189 | public function content( string $content, $extra_tags = array() ): self { |
| 190 | |
| 191 | $this->content = wp_kses( $content, $this->get_allowed_html_tags( $extra_tags ) ); |
| 192 | return $this; |
| 193 | } |
| 194 | |
| 195 | /** |
| 196 | * Set the tooltip placement. |
| 197 | * |
| 198 | * @param string $placement top|bottom|start|end. |
| 199 | * |
| 200 | * @return $this |
| 201 | */ |
| 202 | public function placement( string $placement ): self { |
| 203 | $allowed = array( |
| 204 | self::PLACEMENT_TOP, |
| 205 | self::PLACEMENT_BOTTOM, |
| 206 | self::PLACEMENT_START, |
| 207 | self::PLACEMENT_END, |
| 208 | ); |
| 209 | if ( in_array( $placement, $allowed, true ) ) { |
| 210 | $this->placement = $placement; |
| 211 | } |
| 212 | return $this; |
| 213 | } |
| 214 | |
| 215 | /** |
| 216 | * Set the tooltip size. |
| 217 | * |
| 218 | * @param string $size small|large. |
| 219 | * |
| 220 | * @return $this |
| 221 | */ |
| 222 | public function size( string $size ): self { |
| 223 | $allowed = array( Size::SMALL, Size::MEDIUM, Size::LARGE ); |
| 224 | if ( in_array( $size, $allowed, true ) ) { |
| 225 | $this->size = $size; |
| 226 | } |
| 227 | return $this; |
| 228 | } |
| 229 | |
| 230 | /** |
| 231 | * Set the arrow alignment. |
| 232 | * |
| 233 | * @param string $arrow start|center|end. |
| 234 | * |
| 235 | * @return $this |
| 236 | */ |
| 237 | public function arrow( string $arrow ): self { |
| 238 | $allowed = array( |
| 239 | self::ARROW_START, |
| 240 | self::ARROW_CENTER, |
| 241 | self::ARROW_END, |
| 242 | ); |
| 243 | if ( in_array( $arrow, $allowed, true ) ) { |
| 244 | $this->arrow = $arrow; |
| 245 | } |
| 246 | return $this; |
| 247 | } |
| 248 | |
| 249 | /** |
| 250 | * Set the trigger type. |
| 251 | * |
| 252 | * @param string $trigger hover|focus|click. |
| 253 | * |
| 254 | * @return $this |
| 255 | */ |
| 256 | public function trigger_on( string $trigger ): self { |
| 257 | $allowed = array( |
| 258 | self::HOVER, |
| 259 | self::FOCUS, |
| 260 | self::CLICK, |
| 261 | ); |
| 262 | if ( in_array( $trigger, $allowed, true ) ) { |
| 263 | $this->trigger = $trigger; |
| 264 | } |
| 265 | return $this; |
| 266 | } |
| 267 | |
| 268 | /** |
| 269 | * Set the element that triggers the tooltip. |
| 270 | * |
| 271 | * @param string $trigger_element HTML for the trigger element. |
| 272 | * |
| 273 | * @return $this |
| 274 | */ |
| 275 | public function trigger_element( string $trigger_element ): self { |
| 276 | $this->trigger_element = $trigger_element; |
| 277 | return $this; |
| 278 | } |
| 279 | |
| 280 | /** |
| 281 | * Set the offset. |
| 282 | * |
| 283 | * @param int $offset Distance in pixels. |
| 284 | * |
| 285 | * @return $this |
| 286 | */ |
| 287 | public function offset( int $offset ): self { |
| 288 | $this->offset = $offset; |
| 289 | return $this; |
| 290 | } |
| 291 | |
| 292 | /** |
| 293 | * Set the show and hide delay. |
| 294 | * |
| 295 | * @param int $show Show delay in ms. |
| 296 | * @param int $hide Hide delay in ms. |
| 297 | * |
| 298 | * @return $this |
| 299 | */ |
| 300 | public function delay( int $show, int $hide = 0 ): self { |
| 301 | $this->delay = array( |
| 302 | 'show' => $show, |
| 303 | 'hide' => $hide, |
| 304 | ); |
| 305 | return $this; |
| 306 | } |
| 307 | |
| 308 | /** |
| 309 | * Get the final tooltip HTML. |
| 310 | * |
| 311 | * @return string HTML output. |
| 312 | */ |
| 313 | public function get(): string { |
| 314 | $config = array( |
| 315 | 'placement' => $this->placement, |
| 316 | 'trigger' => $this->trigger, |
| 317 | 'size' => $this->size, |
| 318 | 'arrow' => $this->arrow, |
| 319 | 'offset' => $this->offset, |
| 320 | 'delay' => $this->delay, |
| 321 | ); |
| 322 | |
| 323 | // Prepare x-data dynamic config. |
| 324 | $x_data = sprintf( 'tutorTooltip(%s)', wp_json_encode( $config ) ); |
| 325 | |
| 326 | $trigger_html = $this->trigger_element; |
| 327 | |
| 328 | $this->component_string = sprintf( |
| 329 | '<div x-data="%1$s" x-ref="trigger" class="tutor-tooltip-wrap %2$s" %3$s> |
| 330 | %4$s |
| 331 | <template x-teleport="body"> |
| 332 | <div x-ref="content" x-show="open" x-cloak x-transition class="tutor-tooltip"> |
| 333 | %5$s |
| 334 | </div> |
| 335 | </template> |
| 336 | </div>', |
| 337 | esc_attr( $x_data ), |
| 338 | esc_attr( $this->attributes['class'] ?? '' ), |
| 339 | $this->get_attributes_string(), |
| 340 | $trigger_html, |
| 341 | $this->content |
| 342 | ); |
| 343 | |
| 344 | return $this->component_string; |
| 345 | } |
| 346 | } |
| 347 |