html - Custom Javascript Alert Popup onclick svg path

I have embedded an svg file into an html file and can view it in all browsers and platforms. I now want to make specific paths within the svg clickable. I have used an onclick event to perform this function, however, I have only been able to get a javascript alert box to popup when the path is clicked. Instead of the default javascript alert, I need a custom popup which I can then include unique custom text and a hyperlink url for each of the paths. Therefore, each path would have its own text and hyperlink.

Does anyone know the best/easiest way to accomplish this?

Excerpts from my code below:

 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 x="0px" y="0px" width="771.429px" height="986.584px" viewBox="0 0 771.429 986.584" enable-background="new 0 0 771.429 986.584"
 xml:space="preserve">