ContextHint

A context hint control

Import

import { ContextHint } from "@schukai/monster/source/components/form/context-hint.mjs";

Source

View source code

Package

@schukai/monster

Since

3.55.0

Project name

Keep this short so it remains readable in dashboards and notifications.

Introduction

monster-context-hint provides lightweight contextual hints for fields or actions. It is designed for short suggestions that improve comprehension without interrupting the flow.

Key Features

Compact hint trigger: Works well next to labels and small controls.
Theme-aware icon: Uses a tertiary visual emphasis for helpful hints.
Popper-based content: Opens contextual text on hover, click, or auto mode.

Context Hint Inline

This example uses monster-context-hint as a short inline hint next to a naming field.

Project name

Keep this short so it remains readable in dashboards and notifications.

Javascript

import "@schukai/monster/source/components/form/context-hint.mjs";<script type="module">import "@schukai/monster/source/components/form/context-hint.mjs";</script>

HTML

<div style="display:flex;align-items:center;gap:0.5rem;">
  <label for="context-hint-inline-demo">Project name</label>
  <input id="context-hint-inline-demo" type="text" placeholder="Monster Launch" />
  <monster-context-hint>
    Keep this short so it remains readable in dashboards and notifications.
  </monster-context-hint>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Context Hint Shortcuts

This example shows a hint for operational conventions instead of field validation.

Command palette

Keep shortcuts platform-aware and avoid overriding common browser actions.

Javascript

import "@schukai/monster/source/components/form/context-hint.mjs";<script type="module">import "@schukai/monster/source/components/form/context-hint.mjs";</script>

HTML

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-hint-shortcuts-demo">Command palette</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input id="context-hint-shortcuts-demo" type="text" value="Ctrl+K" />
    <monster-context-hint>
      Keep shortcuts platform-aware and avoid overriding common browser actions.
    </monster-context-hint>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The component extends the shared context popper base and renders a dedicated hint icon button plus a popper content area.

Styling Hooks

classes.button: Sets the themed icon appearance.
::part(button): Styles the trigger icon.
::part(popper): Styles the floating content container.

HTML Structure

<monster-context-hint></monster-context-hint>

JavaScript Initialization

const element = document.createElement('monster-context-hint');
document.body.appendChild(element);

Exported

ContextHint

Derived from

ContextBase

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the ContextBase.

Option

Type

Default

Description

templates

object

The templates for the control.

templates.main

string

undefined

The main template.

mode

string

auto

The mode of the popper. Possible values are `click`, `enter` and `hover`.

content

string

undefined

The content of the popper.

popper

object

undefined

The popper options.

popper.placement

string

undefined

The placement of the popper.

classes

object

Custom CSS classes.

classes.button

string

monster-theme-tertiary-2

CSS class for the button element.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the ContextBase.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the ContextBase.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.