diff --git a/css/80_app.css b/css/80_app.css
index 7f30e41e6..dfb8339f1 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3696,7 +3696,8 @@ img.tile-removing {
     display: inline-block;
 }
 
-.curtain-tooltip.intro-points-describe {
+.curtain-tooltip.intro-points-describe ,
+.curtain-tooltip.intro-lines-name_road {
     top: 133px !important;
 }
 
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 2ce73f1f4..14963748d 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -288,16 +288,8 @@ export function uiIntroLine(context, reveal) {
         timeout(function() {
             var tooltip = reveal(subgrid.node(),
                 t('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
-                { duration: 300 }
+                { tooltipBox: '.preset-highway-residential .preset-list-button', duration: 300 }
             );
-
-            // put the tooltip near the "Residential Road" button
-            var button = d3.select('.preset-highway-residential .preset-list-button').node();
-            var buttonRect = button.getBoundingClientRect();
-            var tooltipRect = tooltip.node().getBoundingClientRect();
-            var top = buttonRect.top - (tooltipRect.height / 2) + (buttonRect.height / 2);
-            tooltip.style('top', top + 'px');
-
         }, 300);
 
         function continueTo(nextStep) {
@@ -342,8 +334,10 @@ export function uiIntroLine(context, reveal) {
         });
 
         timeout(function() {
+            var box = d3.select('.form-field-name').node().getBoundingClientRect();
             reveal('.entity-editor-pane',
-                t('intro.lines.name_road', { button: icon('#icon-apply', 'pre-text') })
+                t('intro.lines.name_road', { button: icon('#icon-apply', 'pre-text') }),
+                { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);