<div id='description'>
  <h3><code>tipHtml();</code></h3>
  <p>Customize info at the tip of the chart taking HTML tags or a String as argument. Tags can include images displaying in "gif" or "png" format.</p>
  <p>Example below shows how If Statements can be used to trigger different hovering events for different tips.</p>
  <p>This snippet of code change the second tip returning a string. <code>.tipHtml((d,i,s) => { if(i == 1){ return 'Peak'}); </code></p>
</div>

#description{
  margin: 1em;
}

//redsift
//tipHtml();
//Customize the tip of charts at certain points to display info to emphasize on this particular tip.
//tip info can display strings and images.
//the example below uses an if statement to trigger different display info at different tips

let chartData = [ //dataset to plot graph where l stands for index(x-axis) and v for value(y-axis)

  {
    "l": 3,
    "v": 1
  }, {
    "l": 4,
    "v": 13
  }, {
    "l": 5,
    "v": 5
  }, {
    "l": 8,
    "v": 12
  }, {
    "l": 11,
    "v": 3
  }
];

let chart = d3_rs_lines.html()
  .tipHtml((d, i, s) => { //use the parameters d,i,s specifying data(d), identity(i) and data series(s)
    if (i == 1) { //if statement using i to change the tip, where when i equal to 1
      return `Peak` //return this string,`Peak` at the tip
    }
    if (i == 3) { //at tip i equal to 3       
      return `<h4>Custom Tip</h4><p><img width="150" height="150" src="http://www.thisiscolossal.com/wp-content/uploads/2013/01/3.gif"/></p>`
    } //return these including a gif image
    else {
      return `<p>Info:<br>Png Image<br><img width="60" height="60" src="http://uploads.webflow.com/56095a9417b66fe82784046d/56095a9417b66fe82784049a_Icon-check.png"/></p>`
    } //else same info on unspecified tips
  });

d3.select('body').datum(chartData).call(chart);