Add tooltips to external links in the UI

[cndouglas]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Fixes #5759

Test Plan:

1. Open a Brave and open Preferences.
2. Open the Security section.
3. In the Plugin Settings section, move your mouse over the link Adobe.
4. Make sure it has a tooltip that matches screenshot 1 below.
5. Move your mouse over the link wiki.
6. Make sure it has a tooltip that matches screenshot 2 below.
7. In the Google Widevine Support section, move your mouse over the first info button (after the first paragraph).
8. Make sure it has a tooltip that matches screenshot 3 below.
9. Move your mouse over the second info button (after the second paragraph).
10. Make sure it has a tooltip that matches screenshot 4 below.
11. Open a new tab. Navigate to any site.
12. Open the Shields panel by clicking the Brave logo in the top right corner.
13. Mouse over the question mark button beside the Fingerprinting Protection switch.
14. Make sure it has a tooltip that matches screenshot 5 below.

Screenshot 1:

Screenshot 2:

Screenshot 3:

Screenshot 4:

Screenshot 5:

[bbondy]

@bradleyrichter please perform a UI/UX review.

[bradleyrichter]

@bbondy
These are good but I wish help pages like this would open a tab to the right of the current tab, and return you to the initiating tab when that tab is closed.

Are we able to add this behavior to internal links like this? (obviously this needs a new issue and one probably exists already.)

[bsclifton]

@liunkae whoops, this needs a rebase- would you be able to do that?

If you have your own fork added as origin and brave/browser-laptop added as upstream, should be just as easy as:

git fetch upstream
git rebase upstream/master
git status

at this point you'll have a conflict (should be in js/about/preferences). You can resolve, save and then:

git add js/about/preferences.js
git rebase --continue
git push -f

BTW- you are more than welcome to join our collaborator channel on Slack. Hit me up for details 😄

[cndouglas]

@bsclifton Rebased! 😉

[bsclifton]

Looks good! There's one more place you could touch up, if you wanted to help make things consistent (this would be a great follow-up issue). 😄 On the payments screen, we have a link to the FAQ:

Instead of being a span, like the ones you had edited, this one is an anchor tag and shows it's URL in the bottom left. Since the majority of the items (with this PR) are setting them to span, it would be good to update this one too and then add a title attribute 😄

[cndouglas]

Sure, I'll try that sometime.