connectedCallback() — astro Function Reference

Architecture documentation for the connectedCallback() function in tooltip.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient calls 1

Entity Profile

DevToolbar→ ToolbarClient→ connectedCallback() — astro Function Reference

Dependency Diagram

graph TD
  17f05048_4f89_66a0_e35b_11d9f74cb863["connectedCallback()"]
  02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80["DevToolbarTooltip"]
  17f05048_4f89_66a0_e35b_11d9f74cb863 -->|defined in| 02d34ec7_b0ee_fa04_4dfa_7cac0d8acf80
  453c295d_f19e_ede7_56f2_06b896195e71["getElementForIcon()"]
  17f05048_4f89_66a0_e35b_11d9f74cb863 -->|calls| 453c295d_f19e_ede7_56f2_06b896195e71
  style 17f05048_4f89_66a0_e35b_11d9f74cb863 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

	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;
				line-height: 1.2;
				white-space: nowrap;
				text-decoration: none;
				margin: 0;
				width: 100%;
			}

			.clickable-section:hover {
				cursor: pointer;