Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.

Thu Oct 05 2017

Imagine you are a software developer for an online academic publisher. You have been asked to enhance the usability of an existing site:


When hovering over any given in-text citation, show a tooltip with the actual corresponding reference text.

An example of in-text citations and references:

Finding treatments for breast cancer is a major goal for scientists.1,2 Some classes of drugs show more promise than others. Gradishar evaluated taxanes as a class.3 Other scientists have investigated individual drugs within this class, including Andre and Zielinski 2 and Joensuu and Gligorov. 4 Mita et al's investigation of cabazitaxel 5 seems to indicate a new role for this class of drugs.


1. Cancer Research Funding. National Cancer Institute. Publication date unavailable. Updated June 6, 2011. Accessed November 3, 2012.

2. Andre F, Zielinski CC. Optimal strategies for the treatment of metastatic triple-negative breast cancer with currently approved agents. Ann Oncol. 2012;23(Suppl 2):vi46-vi51.

3. Gradishar WJ. Taxanes for the treatment of metastatic breast cancer. Breast Cancer (Auckl.). 2012;6:159-171.

4. Joensuu H, Gligorov J. Adjuvant treatments for triple-negative breast cancers. Ann Oncol. 2012;Suppl 6:vi40-45.

5. Mita AC, Figlin R, Mita MM. Cabazitaxel: more than a new taxane for metastatic castrate-resistant prostate cancer? Clin Cancer Res. 2012;18(24):OF1-OF

Explanation of the problem

Online readers are well aware that

  • 1 refers to [reference 1]

  • 1,3,5 refers to [1, 3 and 5]

  • 1-3 refers to [1, 2 and 3]

Unfortunately, there is no concrete relationship between the superscript in-text citation and its corresponding reference. The publisher has no desire to update thousands of online papers by hand either. The HTML code is as follows.

In-text citation



<p>1. Cancer Research Funding. National Cancer Institute. Publication date unavailable. Updated June 6, 2011. Accessed November 3, 2012.</p>


We must create a concrete “one to one” relationship, between these two HTML elements. Once you have connected the two HTML elements with a set of rules, you may store this relationship to create a reliable way to show the correct tooltip.

Firstly we must ‘define the relationship’ in verbose terms/rules/exceptions:

  1. Any superscripted text inside the academic paper body is considered to be an ‘in-text citation’, if the text is of the form of:
    • Digit
    • Digit comma digit …
    • Digit hyphen digit …
  2. Much like a book, where the references come after the citations. The corresponding reference must be appear below the in-text citation on the page
  3. The citation must refer to an actual reference on the page
  4. The citation must find the closest reference within the same page, since multiple papers can exist on the same page

Source code

For brevity a JavaScript alert is used to show the reference text on hover, please modify this to a tooltip of your liking.

Paul Ness

Paul S. Ness Software engineer with ten years of experience in a variety of industries such travel, payments, medical, fine art and publishing.