ContextInfo

A context info control

Import

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

Source

View source code

Package

@schukai/monster

Since

3.55.0

Workspace

The workspace name appears in internal audit logs and export headers.

Introduction

monster-context-info communicates neutral explanatory details. It is useful when a field needs background information but no warning or error state.

Key Features

Informational emphasis: Uses a primary informational theme.
Inline placement: Fits into dense forms without breaking layout.
Flexible popper content: Accepts plain text or richer slotted content.

Context Info Workspace

This example uses monster-context-info for neutral operational background around a workspace field.

Workspace

The workspace name appears in internal audit logs and export headers.

Javascript

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

HTML

<div style="display:flex;align-items:center;gap:0.5rem;">
  <label for="context-info-workspace-demo">Workspace</label>
  <input id="context-info-workspace-demo" type="text" placeholder="Production" />
  <monster-context-info>
    The workspace name appears in internal audit logs and export headers.
  </monster-context-info>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Context Info Retention

This example shows monster-context-info for policy side effects that are useful but not urgent.

Retention policy

Longer retention increases export size and can affect reporting runtimes.

Javascript

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

HTML

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-info-retention-demo">Retention policy</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <select id="context-info-retention-demo">
      <option>30 days</option>
      <option>90 days</option>
      <option>365 days</option>
    </select>
    <monster-context-info>
      Longer retention increases export size and can affect reporting runtimes.
    </monster-context-info>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The component is built on the context base and exposes a button part and a popper part for controlled styling.

Styling Hooks

classes.button: Controls the informational icon theme.
::part(button): Styles the visible trigger.
::part(content): Styles the content inside the popper.

HTML Structure

<monster-context-info></monster-context-info>

JavaScript Initialization

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

Exported

ContextInfo

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-primary-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.