Plotly.JS - trying to add custom definitions (or tooltips) to each data point in a donut chart using Array

have a Plotly.JS donut chart that I want users to be able to hover over data and see the definition of each type of healthcare in addition to the label and data. For example, when they hover over Specialty Care, I would want it to look like this:

Specialty Care
42.9%
Specialty Care Definition

I thought I could add an array of definitions (see “desc:”) and add it hoverinfo, but either you can’t or I’m doing it wrong. My question is how would I get this to work so I can have it look like the bolded above?

Here’s my codepen: https://codepen.io/tenebris_silentio/pen/OJNJxGX

And my code…

<!DOCTYPE html>
   <html lang="en">
   <div id='myDiv'>
<script>

  var ultimateColors = [
    ['rgb(0, 25, 51)', 'rgb(0, 76, 153)', 'rgb(51, 153, 255)', 'rgb(153, 204, 255)', 'rgb(51, 51, 255)', 'rgb(204, 255, 255)']
  ];

  var data = [{
    values: [4, 21, 8, 1, 1, 14],
    labels: ['Primary Care', 'Specialty Care', 'Mental Health', 'Inpatient/Acute Care', 'Long-term Care', 'General Care/Not Specified'],
    desc: ['Primary Care Definition', 'Specialty Care Definition', 'Mental Health Definition', 'Inpatient/Acute Care Definition', 'Long-term Care Definition', 'General Care/Not Specified Definition'],
    domain: {column: 0},
    name: 'Sources',
    marker: {
      colors: ultimateColors[0]
    },
    hoverinfo: 'label+percent+desc',

    hole: .4,
    type: 'pie'
  }];

  var layout = {
    title: 'Access Projects by Care Type' + '<br>' + 'N = 49',
    annotations: [
      {
        font: {
          size: 17
        },
        showarrow: false,
        text: '',
        x: 0.5,
        y: 0.5
      },


    ],
    height: 650,
    width: 800,
    showlegend: true,
    grid: {rows: 1, columns: 1}
  };

  Plotly.newPlot('myDiv', data, layout);
  </script>