Create a Tour

Note: moved from the "tasks" section of the contributor guide. https://www.drupal.org/community/contributor-guide/find-a-task

1. Set up prerequisites: Log in, and be ready to set up an Online testing site from Common Prerequisites for Contributors (you can use a local development site if you prefer, but this writeup will assume you are using an online site.
2. Find an issue that is asking for a tour to be created. For contributed modules, search the issue list for an issue containing the word "tour", or consider creating a new issue if you think the module could benefit from a tour (you might want to consult with the contributed project's maintainers to see if they are receptive to the idea first).
3. Verify that no one has commented on the issue recently saying they are working on the issue already. If someone is already working on it, find another issue.
4. Add a comment to the issue saying you are working on creating the tour. If you are not familiar with how to update or comment on an issue, see Creating or updating an issue.
5. Create an online testing site to use to make the tour -- see the "Using online Drupal testing sites" section of the Setting up a test environment page. In the Project field, select the project you are making the tour for (Drupal Core or the contributed module, theme, or distribution). For the version, select the latest development branch of the project. (Branches are listed at the bottom of the version list, and end with ".x".) Under Additional projects, add the Tour UI contributed module and the Devel contributed module.
6. Log in to your online testing site and install the core Configuration Manager module, plus the Tour UI and Devel modules.
7. Determine the "route" of the administration page that needs a tour, and which core or contributed module provides the page. Hopefully this will be listed in the issue you chose. If not, you can visit the /devel/routes page to see a list of routes on your site.
8. In your test site, open a browser tab to the administration page you are creating the tour for.
9. In your test site, in another tab or window, navigate in the Manage administration menu to Configuration > User Interface > Tours (admin/config/user-interface/tour). You will see a list of tours that exist on your site (provided by modules, such as Views).
10. Click the Add tour button. Fill in a name for your tour and the route and module. The tour name is generally the same as the name of the administration page you are documenting.
11. Click Save. You will come back to the Add tour page, but now there will be a section at the bottom where you can add the individual "tips" that make up the tour.
12. Create your tour by adding "tips" to it. To add a tip:
    1. In the administration page that you are creating the tour for, decide where the tip should go: usually at the top or attached to a particular user interface element.
    2. If you want to attach the tip to a user interface element, use the browser's Inspect or Inspect element functionality to find the ID or class of the user interface element you want to attach the tip to.
    3. Scroll to the Tips section of the Add Tip page, choose Text from the drop-down, and click Add.
    4. On the Add tip page, in the Attributes section, choose Data ID or Data Class if you want to attach the tip to an element of the user interface, or Modal if not. Then type the ID or class of the element in the box; if Modal, choose the location (such as Top) below the attributes section.
    5. Enter the desired label and body for your tip, keeping in mind the guidelines for tips (listed in the Background section).
    6. Click Save to save your tip.
13. When you have created all of the tips, reload the administration page that you created the tour for. You should see a Tour button at the upper-right corner of the page. Click this button to test your tour. If you don't see the Tour button, clear the cache, reload the page, and try again. If you still don't see the Tour button, check to make sure the route name you entered is correct, and edit the tour to correct it if not.
14. If you find any problems, edit your tour from the Tours page, and test it again. Continue until it is how you want it.
15. Export your tour into a YAML file. To do that:
    1. Navigate in the Manage administration menu to Configuration > Development > Configuration synchronization > Export > Single item (admin/config/development/configuration/single/export).
    2. In the Configuration Type drop-down, choose Tour. In the Configuration Name drop-down, choose the name of the tour you created. You should now see YAML output containing your tour and its tips.
    3. Copy the entire text from the output field. Paste it into a plain-text editor, and save the file. The name of the file must match the name shown at the bottom under the output field.
16. Do one of the following, to attach the tour file to your issue:
    (a) Put the new tour file into the config/optional directory of the module it belongs with, and make a patch and attach it in the Files section of the issue, or make a merge request.
    (b) If you don't know how to make a patch or merge request, or don't have the tools installed, you can add a .txt extension suffix to your exported configuration file, and attach it directly in the Files section of the issue. Someone else can most likely make it into a patch.
17. Set the issue Status to Needs review, and write a comment explaining your tour. Save the issue update.