diff --git a/assets/css/app.css b/assets/css/app.css
index 96678f82c..079f844c7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -11,3 +11,4 @@
 @import "./markdown.css";
 @import "./ansi.css";
 @import "./js_interop.css";
+@import "./tooltips.css";
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
new file mode 100644
index 000000000..4d17a5b2f
--- /dev/null
+++ b/assets/css/tooltips.css
@@ -0,0 +1,135 @@
+/* Tooltips */
+
+/*
+Example usage:
+
+  <span class="tooltip top" aria-label="Delete">
+    ...
+  </span>
+*/
+
+/* Tooltip element wrapping the actual hoverable element */
+.tooltip {
+  position: relative;
+  --distance: 0px;
+  --arrow-size: 5px;
+  --show-delay: 0.5s;
+}
+
+.tooltip.distant {
+  --distance: 28px;
+}
+
+/* Tooltip text */
+.tooltip:before {
+  position: absolute;
+  content: attr(aria-label);
+  white-space: pre;
+  text-align: center;
+  display: block;
+  background-color: #1c273c;
+  color: #f0f5f9;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 3px 12px;
+  z-index: 100;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+
+/* Tooltip arrow */
+.tooltip:after {
+  content: "";
+  position: absolute;
+  display: block;
+  /* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
+  border-width: var(--arrow-size);
+  border-style: solid;
+  border-color: #1c273c;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+
+.tooltip:hover:before {
+  visibility: visible;
+  transition-delay: var(--show-delay);
+}
+
+.tooltip:hover:after {
+  visibility: visible;
+  transition-delay: var(--show-delay);
+}
+
+/*
+Note: we let the arrow and content overlap 1px,
+othrwise there's a tiny space between them.
+*/
+
+.tooltip.top:before {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, calc(1px - var(--arrow-size) - var(--distance)));
+}
+
+.tooltip.top:after {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, calc(0px - var(--distance)));
+
+  border-bottom: none;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.tooltip.bottom:before {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, calc(var(--arrow-size) - 1px + var(--distance)));
+}
+
+.tooltip.bottom:after {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, var(--distance));
+
+  border-top: none;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.tooltip.right:before {
+  top: 50%;
+  left: 100%;
+  transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
+}
+
+.tooltip.right:after {
+  top: 50%;
+  left: 100%;
+  transform: translate(var(--distance), -50%);
+
+  border-left: none;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.tooltip.left:before {
+  top: 50%;
+  right: 100%;
+  transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
+}
+
+.tooltip.left:after {
+  top: 50%;
+  right: 100%;
+  transform: translate(calc(0px - var(--distance)), -50%);
+
+  border-right: none;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
diff --git a/lib/livebook_web/live/cell_component.ex b/lib/livebook_web/live/cell_component.ex
index 8f2a1c1de..07cee29d7 100644
--- a/lib/livebook_web/live/cell_component.ex
+++ b/lib/livebook_web/live/cell_component.ex
@@ -18,23 +18,31 @@ defmodule LivebookWeb.CellComponent do
     ~L"""
     <div class="mb-1 flex items-center justify-end" data-element="actions">
       <div class="relative z-10 flex items-center justify-end space-x-2">
-        <button data-element="enable-insert-mode-button">
-          <%= remix_icon("pencil-line", class: "text-xl action-icon") %>
-        </button>
-        <button phx-click="move_cell"
-          phx-value-cell_id="<%= @cell.id %>"
-          phx-value-offset="-1">
-          <%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
-        </button>
-        <button phx-click="move_cell"
-          phx-value-cell_id="<%= @cell.id %>"
-          phx-value-offset="1">
-          <%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
-        </button>
-        <button phx-click="delete_cell"
-          phx-value-cell_id="<%= @cell.id %>">
-          <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
-        </button>
+        <span class="tooltip top" aria-label="Edit content">
+          <button data-element="enable-insert-mode-button">
+            <%= remix_icon("pencil-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
+        <span class="tooltip top" aria-label="Move up">
+          <button phx-click="move_cell"
+            phx-value-cell_id="<%= @cell.id %>"
+            phx-value-offset="-1">
+            <%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
+        <span class="tooltip top" aria-label="Move down">
+          <button phx-click="move_cell"
+            phx-value-cell_id="<%= @cell.id %>"
+            phx-value-offset="1">
+            <%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
+        <span class="tooltip top" aria-label="Delete">
+          <button phx-click="delete_cell"
+            phx-value-cell_id="<%= @cell.id %>">
+            <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
       </div>
     </div>
 
@@ -79,23 +87,31 @@ defmodule LivebookWeb.CellComponent do
         <% end %>
       </div>
       <div class="relative z-10 flex items-center justify-end space-x-2">
-        <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell.id) do %>
-          <%= remix_icon("list-settings-line", class: "text-xl action-icon") %>
-        <% end %>
-        <button phx-click="move_cell"
-          phx-value-cell_id="<%= @cell.id %>"
-          phx-value-offset="-1">
-          <%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
-        </button>
-        <button phx-click="move_cell"
-          phx-value-cell_id="<%= @cell.id %>"
-          phx-value-offset="1">
-          <%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
-        </button>
-        <button phx-click="delete_cell"
-          phx-value-cell_id="<%= @cell.id %>">
-          <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
-        </button>
+        <span class="tooltip top" aria-label="Cell settings">
+          <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell.id) do %>
+            <%= remix_icon("list-settings-line", class: "text-xl action-icon") %>
+          <% end %>
+        </span>
+        <span class="tooltip top" aria-label="Move up">
+          <button phx-click="move_cell"
+            phx-value-cell_id="<%= @cell.id %>"
+            phx-value-offset="-1">
+            <%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
+        <span class="tooltip top" aria-label="Move down">
+          <button phx-click="move_cell"
+            phx-value-cell_id="<%= @cell.id %>"
+            phx-value-offset="1">
+            <%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
+        <span class="tooltip top" aria-label="Delete">
+          <button phx-click="delete_cell"
+            phx-value-cell_id="<%= @cell.id %>">
+            <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
+          </button>
+        </span>
       </div>
     </div>
 
diff --git a/lib/livebook_web/live/section_component.ex b/lib/livebook_web/live/section_component.ex
index 33905e2b1..c431e85a6 100644
--- a/lib/livebook_web/live/section_component.ex
+++ b/lib/livebook_web/live/section_component.ex
@@ -17,9 +17,11 @@ defmodule LivebookWeb.SectionComponent do
           <%# ^ Note it's important there's no space between <h2> and </h2>
             because we want the content to exactly match @section.name. %>
         <div class="flex space-x-2 items-center" data-element="section-actions">
-          <button phx-click="delete_section" phx-value-section_id="<%= @section.id %>" tabindex="-1">
-            <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
-          </button>
+          <span class="tooltip top" aria-label="Delete">
+            <button phx-click="delete_section" phx-value-section_id="<%= @section.id %>" tabindex="-1">
+              <%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
+            </button>
+          </span>
         </div>
       </div>
       <div class="container py-2">
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index c573a97c1..c1df88a0d 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -78,16 +78,22 @@ defmodule LivebookWeb.SessionLive do
             Lb
           </div>
         <% end %>
-        <button class="text-2xl text-gray-600 hover:text-gray-50" data-element="sections-panel-toggle">
-          <%= remix_icon("booklet-fill") %>
-        </button>
-        <%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file") do %>
-          <%= remix_icon("settings-4-fill", class: "text-2xl text-gray-600 hover:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}") %>
-        <% end %>
+        <span class="tooltip right distant" aria-label="Sections">
+          <button class="text-2xl text-gray-600 hover:text-gray-50" data-element="sections-panel-toggle">
+            <%= remix_icon("booklet-fill") %>
+          </button>
+        </span>
+        <span class="tooltip right distant" aria-label="Notebook settings">
+          <%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file") do %>
+            <%= remix_icon("settings-4-fill", class: "text-2xl text-gray-600 hover:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}") %>
+          <% end %>
+        </span>
         <div class="flex-grow"></div>
-        <%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id) do %>
-          <%= remix_icon("keyboard-box-fill", class: "text-2xl text-gray-600 hover:text-gray-50") %>
-        <% end %>
+        <span class="tooltip right distant" aria-label="Keyboard shortcuts">
+          <%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id) do %>
+            <%= remix_icon("keyboard-box-fill", class: "text-2xl text-gray-600 hover:text-gray-50") %>
+          <% end %>
+        </span>
       </div>
       <div class="flex flex-col w-1/5 bg-gray-100 border-r border-gray-200" data-element="sections-panel">
         <div class="flex-grow flex flex-col space-y-2 pl-4 pt-4"