vdavez/glossary.csv

## glossary.csv

          
            term
            definition
            url

            
              ATO
              Authority to Operate

            
              18F
              a team of top-notch designers, developers, and product specialists inside the General Services Administration, headquartered at 18 and F streets in Washington, D.C.
              https://18f.gsa.gov

            
              GSA
              General Services Administration
              http://gsa.gov

            
              d3
              Data-Driven Documents
              http://d3js.org

## glossary.js
d3.csv('glossary.csv', function (d){
  d.forEach(function(w,i,a){
    var b = d3.select('body')
    var s = b.html()
    b.html(replaceAll(w.term, tipper(w.term, w.definition, w.url),s))
    $('[data-toggle="tooltip"]').tooltip();
  })
})

function tipper (text, tooltip, url) {
  var tipURL = (url ? url : "#")
  return '<a href="' + tipURL + '" data-toggle="tooltip" data-placement="bottom" title="' + tooltip + '">' + text + '</a>'
}

function replaceAll(find, replace, str) {
  return str.replace(new RegExp("\\b" + find + "\\b", 'g'), replace); // the "\\b" ensures that only exact matches get through
}

## index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h1>Glossary and D3</h1>
<p>There are some abbreviations in here, including ATO and GSA, and they deserve tooltips.</p>
<p>Additionally, there are things that need definitions, and have outbound URLs, like 18F.</p>
<p>These tooltips are generated automatically by d3 and bootstrap.</p>
</div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="./glossary.js"></script>
</body>
</html>
term	definition	url
ATO	Authority to Operate
18F	a team of top-notch designers, developers, and product specialists inside the General Services Administration, headquartered at 18 and F streets in Washington, D.C.	https://18f.gsa.gov
GSA	General Services Administration	http://gsa.gov
d3	Data-Driven Documents	http://d3js.org
	d3.csv('glossary.csv', function (d){
	d.forEach(function(w,i,a){
	var b = d3.select('body')
	var s = b.html()
	b.html(replaceAll(w.term, tipper(w.term, w.definition, w.url),s))
	$('[data-toggle="tooltip"]').tooltip();
	})
	})

	function tipper (text, tooltip, url) {
	var tipURL = (url ? url : "#")
	return '<a href="' + tipURL + '" data-toggle="tooltip" data-placement="bottom" title="' + tooltip + '">' + text + '</a>'
	}

	function replaceAll(find, replace, str) {
	return str.replace(new RegExp("\\b" + find + "\\b", 'g'), replace); // the "\\b" ensures that only exact matches get through
	}
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	</head>

	<body>
	<div class="container">
	<h1>Glossary and D3</h1>
	<p>There are some abbreviations in here, including ATO and GSA, and they deserve tooltips.</p>
	<p>Additionally, there are things that need definitions, and have outbound URLs, like 18F.</p>
	<p>These tooltips are generated automatically by d3 and bootstrap.</p>
	</div>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="./glossary.js"></script>
	</body>
	</html>