Add Search Tips Feature to Projects Page

[dvernon5]

Original Issue

This project can be linked back to issue #6327

Overview

We need to add a search-tip link to the project page so that users know that they can use Boolean operators

Details

The project page needs a search-tip link in the desktop and mobile version. In the desktop version it should be below the Filter section, and in the mobile version it should be between the Filter hamburger and the search-box. In order to help user have a better understanding of search-box searching functionalities.

Example of How the Search Link Should Look

Link Text placement on Desktop/Tablet:

Link Text placement on Mobile:

Action Items

• Add a link text called Search Tip at the bottom of the Filter Section for desktop version and in-between the Filter hamburger and search-box in the mobile version.
• The link text called Search Tip should consist of the modal content below. Create the modal content, that way when the user clicks on the Search Tip link the modal will appear.

Boolean Operators	Meaning	Example
AND	Limit results	React AND Node (Search for project cards that contain both React and Node.)
OR	One term OR another	Python OR Javascript (Search for project cards that contains Python OR JavaScript.)
-	Exclude a term from the search	React -Django (Limits project card results to only those with React and not the term Django.)

• Make the appropriate changes to the CSS, HTML, and JS as you need to
• Once you have submitted the PR, please list the files you added or changed to make the Search Tip link. Also, the information you used to create the modal content. You can leave that write-up here in this issue as a comment.

[github-actions]

Hi @dvernon5.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Feature, Size

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels