Pull from site on text hover

Hello,

I’m building a site for my friends and I to use for our Pathfinder Roleplaying Game campaign. We’re going to use it to discuss builds, the game world, background story, characters, and so on, so that when we meet up we’re mostly ready to play week to week.

Paizo (the company that distributes and develops the Pathfinder game) has released the majority of the game’s information and resources as part of an online System Resource Document (SRD). They call this their Pathfinder Resource Document (PRD), and it can be found here. I’d like to be able to pull from this whenever a keyword is used to convert that keyword into a link.

For example, if a user posts a message containing the phrase “Power Attack” I want the site to automatically turn the text into a hyperlink to Power Attack.

Additionally, when a user hovers over the Power Attack text, I’d like for a small hover box to appear that pulls some basic information about the linked content. In this case, I’d like it to list prerequisites and a condensed version of what the feat does (+2 bonus to all melee damage rolls; -1 penalty to all melee attack rolls and combat maneuver checks).

I want only condensed text in the hover box to let people get the gist of what’s being discussed, while still allowing for them to read the full information by reading the link.

I understand that this is potentially a complex feature to create, and so I’m not expecting a direct answer (but if you have one, great!).

My problem is that I don’t know where to begin creating such a feature from scratch, and would like some help being pointed along in the right direction.

Thank you for your time and advice.