astro Architecture Docs
Home / Class/ DevToolbarTooltip Class — astro Architecture

DevToolbarTooltip Class — astro Architecture

Architecture documentation for the DevToolbarTooltip class in tooltip.ts from the astro codebase.

Class typescript DevToolbar

Entity Profile

Dependency Diagram

graph TD
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80["DevToolbarTooltip"]
  f62d44ee_b253_4dc0_0fea_9beec3518b24["tooltip.ts"]
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80 -->|defined in| f62d44ee_b253_4dc0_0fea_9beec3518b24
  57476ff9_49d3_2272_5498_3b784b145a48["constructor()"]
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80 -->|method| 57476ff9_49d3_2272_5498_3b784b145a48
  17f05048_4f89_66a0_e35b_11d9f74cb863["connectedCallback()"]
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80 -->|method| 17f05048_4f89_66a0_e35b_11d9f74cb863
  453c295d_f19e_ede7_56f2_06b896195e71["getElementForIcon()"]
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80 -->|method| 453c295d_f19e_ede7_56f2_06b896195e71

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts lines 12–172

export class DevToolbarTooltip extends HTMLElement {
	sections: DevToolbarTooltipSection[] = [];
	shadowRoot: ShadowRoot;

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
		this.shadowRoot.innerHTML = `
			<style>
			:host {
				position: absolute;
				display: none;
				color: white;
				background: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);
				border: 1px solid rgba(113, 24, 226, 1);
				border-radius: 4px;
				padding: 0;
				font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
				font-size: 14px;
				margin: 0;
				z-index: 2000000001;
				max-width: 45ch;
				width: fit-content;
				min-width: 30ch;
				box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
			}

			:host([data-show="true"]) {
				display: block;
			}

			svg {
				vertical-align: bottom;
				margin-inline-end: 4px;
			}

			hr {
				border: 1px solid rgba(136, 58, 234, 0.33);
				padding: 0;
				margin: 0;
			}

			section {
				padding: 8px;
			}

			.section-content {
				max-height: 250px;
    		overflow-y: auto;
			}

			.modal-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.modal-main-title {
				font-weight: bold;
			}

			.modal-title + div {
				margin-top: 8px;
			}

			.modal-cta {
				display: block;
				font-weight: bold;
				font-size: 0.9em;
			}

			.clickable-section {
				background: rgba(113, 24, 226, 1);
				padding: 8px;
				border: 0;
				color: white;
				font-family: system-ui, sans-serif;
				text-align: left;

Domain

Defined In

Source

Frequently Asked Questions

What is the DevToolbarTooltip class?
DevToolbarTooltip is a class in the astro codebase, defined in packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts.
Where is DevToolbarTooltip defined?
DevToolbarTooltip is defined in packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts at line 12.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free