Uncertainty Marker

Trust component

<loquix-uncertainty-marker> wraps a phrase inside generated prose and marks it as something the reader should not take at face value. A tooltip explains why on hover or focus.

loquix-uncertainty-markerthree kindsthree visual variants

Preview

Marked phrases Live component

The policy changed in March 2024, and the threshold is around 500 orders. A revision is likely this quarter.

Hover or tab to a marked phrase to see its tooltip.

Usage

import '@loquix/core/define/define-uncertainty-marker';

<loquix-uncertainty-marker kind="needs-verification">
  around 500 orders
</loquix-uncertainty-marker>

const marker = document.querySelector('loquix-uncertainty-marker');

marker.addEventListener('loquix-uncertainty-click', (event) => {
  openVerificationPanel(event.detail.kind, event.detail.reason);
});

Kinds and variants

Kind	Meaning
unsure	The model is not confident in this phrase.
needs-verification	Plausible, but a human should confirm it.
speculative	An extrapolation rather than something sourced.

Variant	Appearance
underline	Dotted underline under the phrase.
highlight	Tinted background behind the phrase.
icon	Underline plus a trailing icon.

Each kind carries a localized default reason. Set reason to replace it with something specific to the claim.

Properties

Property	Attribute	Type	Default	Description
kind	kind	'unsure' | 'needs-verification' | 'speculative'	'unsure'	What kind of uncertainty applies.
variant	variant	'underline' | 'highlight' | 'icon'	'underline'	How the phrase is marked.
reason	reason	string	localized	Explicit reason shown in the tooltip.

Events

Event	Detail	Description
loquix-uncertainty-click	{ kind, reason? }	Fired on click, Enter, or Space.

Content slot

The default slot holds the phrase being marked. Keep it to the words actually in doubt — marking a whole paragraph tells the reader nothing about which part to check.

Accessibility

The slotted text stays the control’s accessible name, and the kind and reason are attached with aria-describedby. A screen reader therefore reads the phrase first and the caveat second, instead of replacing the phrase with the caveat.

The tooltip opens on hover and on focus, and closes on mouse leave, blur, or Escape.

Mark sparingly

Every marked phrase asks the reader to do work. A paragraph with six markers reads as noise; one or two draw the eye where it matters.

CSS parts

Part	Purpose
marker	Wrapper element.
text	Container for the slotted text.
icon	Trailing icon, in the icon variant only.
tooltip	The tooltip element.

CSS custom properties

Variable	Purpose
--loquix-uncert-unsure-color	Foreground for the unsure kind.
--loquix-uncert-unsure-bg	Highlight background for the unsure kind.
--loquix-uncert-verify-color	Foreground for needs-verification.
--loquix-uncert-verify-bg	Highlight background for needs-verification.
--loquix-uncert-spec-color	Foreground for speculative.
--loquix-uncert-spec-bg	Highlight background for speculative.