CSS: context-view ​

.instui-context-view — 带有尖角的提升型提示，可在任意一侧定位；作为原生 [popover] 使用。

尖角由两个叠放的 ::before/::after 三角形（先边框再填充）构成，以便在匹配的表面上正确显示；作为 [popover] 时，需要与 popover 相同的打开/关闭 链接（open/popovertarget），但与 tooltip 不同，它会在点击外部或按 Esc 时关闭。

Source: context-view.css

用法 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";

示例 ​

html
<div class="instui-context-view -placement-bottom" id="cv-popover">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>

修饰符 ​

修饰符描述
.-color-inverse深色（反转）配色方案。
.-placement-bottom位于锚点下方。
.-placement-end位于锚点的末端（inline-end）。
.-placement-start位于锚点的起始处（inline-start）。
.-placement-top位于锚点上方。

伪元素 ​

伪元素描述
::after渲染尖角的内部填充三角形。
::before渲染尖角的外部边框三角形。

状态 ​

状态描述
:state(open)—

条件 ​

类型查询描述
supports(position-area: block-end)—

消耗代币 ​

Token类型值
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-background-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-context-view-arrow-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-context-view-arrow-background-color-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-component-context-view-arrow-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-context-view-arrow-border-color-inverse<color>#00000000
--instui-component-context-view-arrow-border-width<length>0.0625rem
--instui-component-context-view-arrow-size<length>0.5rem
--instui-component-context-view-border-radius<length>0.75rem
--instui-elevation-abovenone | <shadow>#—
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem

浏览器支持 ​

  • 使用 CSS 锚点定位（position-anchor, position-area, position-try-fallbacks）和原生 [popover] API，置于 @supports 保护之下；需要较新的 Chromium 或 Safari，其他情况下回退为以浏览器为中心的弹出层（UA-centred popover）。

相关 ​

  • popover — 通用的顶层弹出框。
  • tooltip — 更小的悬停或聚焦提示。