Skip to content

Instantly share code, notes, and snippets.

@jwmcgettigan

jwmcgettigan/index.html

Created March 14, 2023 04:39
Show Gist options
  • Save jwmcgettigan/3a563a4df07f02c94d5fc866ca43b851 to your computer and use it in GitHub Desktop.
Save jwmcgettigan/3a563a4df07f02c94d5fc866ca43b851 to your computer and use it in GitHub Desktop.
Download ZIP
Godot Tooltip UI Designs
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<style>
body {
background-color: #1d2229;
color: #cdcfd2;
font-family: 'JetBrains Mono', monospace;
height: 200vh;
}
.code {
font-family: 'JetBrains Mono', monospace;
}
.codeblock {
background-color:#22252d;
color: rgba(214, 143, 143, 0.87);
border-radius: 4px;
padding: 1.5px 4px;
font-size: 0.7rem;
}
p {
margin: 2px 0;
}
.class {
color: #8fffdb;
}
.func {
color: #f86e82;
}
.func_name {
color: #66e5ff;
}
.func_call {
color: #57b2ff;
}
.comment {
color: #75787d;
}
.pass {
color: #ff8ccc;
}
.print {
color: #a3a3f5;
}
.string {
color: #ffeda1;
}
.parenthesis {
color: #abc9ff;
}
.link {
color: #51afff;
display: inline-flex;
gap: 0.25rem;
}
.link:hover {
text-decoration: underline;
cursor: pointer;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
font-family: 'Open Sans', sans-serif;
visibility: hidden;
width: 450px;
background-color: #363d4a; /* #404040; */ /* #21262e; */
color: rgba(205, 207, 210, 0.77); /* #cdcfd2; */
border: 1px solid rgba(205, 207, 210, 0.47); /* #171a1d; */
text-align: center;
border-radius: 3px;
padding: 5px;
position: absolute;
z-index: 1;
font-size: 0.8rem;
top: 20px;
text-align: start;
/* scrollbar-color: rgba(205, 207, 210, 0.77); */
}
.tooltip .tooltiptext-scroll {
overflow-y: auto;
max-height: 10rem;
}
.tooltiptext-scroll::-webkit-scrollbar {
width: 0.5rem;
}
.tooltiptext-scroll::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.tooltiptext-scroll::-webkit-scrollbar-thumb {
background-color: darkgrey;
}
.tooltiptext-scroll2::-webkit-scrollbar {
width: 0.25rem;
}
.tooltiptext-scroll2::-webkit-scrollbar-thumb {
background-color: #70757f;
}
.tooltiptext-scroll3::-webkit-scrollbar-track {
box-shadow: none;
}
.tooltiptext-scroll3::-webkit-scrollbar-thumb {
background-color: #70757f;
}
/* Show the tooltip text when hovering over the container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip-header {
display: flex;
gap: 0.5rem;
}
.tooltip-id {
position: absolute;
top: 0.35rem;
right: 0.5rem;
z-index: 10;
color:rgba(205, 207, 210, 0.27);
}
.tooltips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
</style>
</head>
<body>
<main>
<div>
<p><span class="func">extends</span> <span class="class">Node</span></p>
<br>
<br>
<p class="comment"># Called when the node enters the scene tree for the first time.</p>
<div>
<span class="func">func</span> <span class="func_name tooltip">
<div class="tooltiptext">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<div class="tooltiptext-scroll tooltiptext-scroll3">
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
_ready
</span><span class="parenthesis">():</span>
</div>
<p>&emsp;&emsp;<span class="func_call">custom_function</span><span class="parenthesis">()</span></p>
<p>&emsp;&emsp;<span class="pass">pass</span> <span class="comment"># Replace with function body.</span></p>
<br>
<br>
<p class="comment"># Called every frame. 'delta' is the elapsed time since the previous frame.</p>
<p><span class="func">func</span> <span class="func_name">_process</span><span class="parenthesis">(</span>delta<span class="parenthesis">):</span></p>
<p>&emsp;&emsp;<span class="pass">pass</span></p>
<br>
<br>
<p class="comment"># This is a description</p>
<p><span class="func">func</span> <span class="func_name">custom_function</span><span class="parenthesis">():</span></p>
<p>&emsp;&emsp;<span class="print">print</span><span class="parenthesis">(</span><span class="string">'please hover for me!'</span><span class="parenthesis">)</span></p>
</div>
<div style="height: 0; width: 100%; border-bottom: 1px solid rgba(205, 207, 210, 0.47); margin-top: 2rem"></div>
<div class="tooltips">
<div class="tooltip">
<div class="tooltiptext tooltiptext-scroll" style="visibility: visible; position: relative;">
<p class="code tooltip-header"><img src="https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberMethod.svg"/> <span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext tooltiptext-scroll" style="visibility: visible; position: relative;">
<p class="code tooltip-header"><img src="https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberMethod.svg"/> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext tooltiptext-scroll" style="visibility: visible; position: relative;">
<p class="code tooltip-header"><img style="padding: 2px; background-color: rgba(205, 207, 210, 0.47); border-radius: 4px;" src="https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberMethod.svg"/> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext tooltiptext-scroll" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><img src="https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberMethod.svg"/> <span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext tooltiptext-scroll" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<div class="tooltiptext-scroll">
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<div class="tooltiptext-scroll tooltiptext-scroll2">
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<div class="tooltiptext-scroll tooltiptext-scroll3">
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
</div>
<div class="tooltip">
<div class="tooltiptext" style="visibility: visible; position: relative;">
<p class="code tooltip-header" style="border-bottom:1px solid rgba(205, 207, 210, 0.27); padding-bottom: 0.5rem;"><span class="func">func</span> <span class="func_name">_ready</span><span class="parenthesis">() -></span> <span class="func">void</span></p>
<div class="tooltiptext-scroll tooltiptext-scroll2 tooltiptext-scroll3">
<p style="margin-top: 0.5rem;">Called when the node is "ready", i.e. when both the node and its children have entered the scene tree. If the node has children, their <span class="link">_ready</span> callbacks get triggered first, and the parent node will receive the ready notification afterwards.</p>
<br>
<p>Corresponds to the <span class="link">NOTIFICATION_READY</span> notification in <span class="link">Object._notification</span>. See also the <span class="codeblock">@onready</span> annotation for variables.</p>
<br>
<p>Usually used for initialization. For even earlier initialization, <span class="link">Object._init</span> may be used. See also <span class="link">_enter_tree</span>.</p>
<br>
<p>Note: <span class="link">_ready</span> may be called only once for each node. After removing a node from the scene tree and adding it again, <span class="codeblock">_ready</span> will not be called a second time. This can be bypassed by requesting another call with <span class="link">request_ready</span>, which may be called anywhere before adding the node again.</p>
</div>
</div>
</div>
</div>
</main>
<script>
const icons = {
'method': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberMethod.svg',
'property': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberProperty.svg',
'constant': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberConstant.svg',
'signal': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberSignal.svg',
'ellipsis': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/MemberSignal.svg',
'copyNodePath': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/CopyNodePath.svg',
'linkButton': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/LinkButton.svg',
'externalLink': 'https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/ExternalLink.svg'
};
const body = document.body;
const links = body.getElementsByClassName('link')
for (let link of links) {
link.innerHTML += ` <img src='https://raw.githubusercontent.com/godotengine/godot/master/editor/icons/ExternalLink.svg'/>`
}
const tooltips = body.getElementsByClassName('tooltiptext')
for (let i = 0; i < tooltips.length; i++) {
tooltips[i].innerHTML += ` <div class="tooltip-id">(${i})</div>`
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment