grafana-statusmap/src/partials/tooltip_editor.html

<div class="editor-row">
  <div class="section gf-form-group">
    <gf-form-switch class="gf-form" label-class="width-10"
      label="Show tooltip"
      tooltip="'Show tooltip when mouse is over the card'"
      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-10"
      label="Freeze on click"
      tooltip="'Freeze tooltip copy when card is clicked'"
      checked="ctrl.panel.tooltip.freezeOnClick" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-10"
      label="Show items"
      tooltip="'Show items (urls) in tooltip'"
      checked="ctrl.panel.tooltip.showItems" on-change="ctrl.render()">
    </gf-form-switch>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Items</h5>

    <div class="gf-form" ng-show="ctrl.panel.tooltip.items.length == 0">
      <label class="gf-form-label width-2">0</label>
      <label class="gf-form-input width-30">No items defined.</label>
    </div>
  </div>
</div>  
  
<div>
  <div ng-repeat="item in ctrl.panel.tooltip.items">
    <div class="gf-form gf-form--grow">
        <label class="gf-form-label width-6">
          URL
          <info-popover mode="left-normal">
            <p>Specify an URL (relative or absolute)</p>
            <span>
              Use special variables:
              <br>
              <em>${__y_label}</em> name of the time series (alias or legend in the query editor).
              <br>
              <em>${__url_time_range}</em> refers to graph range in the form of 'from=...&to=...'.
              <br>
              <em>${__value}</em> refers to current bucket value or max value if multiple values mode is on.
              <br>
              <em>${__value_N}</em> refers to Nth value in current bucket. Value indexes are started from 0. For instance,
              <em>${__value_1}</em> refers to second value.
              <br>
              <em>${__value_date}</em> refers to __value formatted as date.
              <em>${__value_N_date}</em> refers to Nth value in current bucket formatted as date.
            </span>
          </info-popover>
        </label>
        <input type="text" class="gf-form-input" placeholder="https://www.google.es" data-placement="top"
          bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="item.urlTemplate"
          ng-change="ctrl.refresh()">
        <label class="gf-form-label">
          <i class="fa fa-trash pointer" ng-click="editor.onRemoveUrl($index)"></i>
        </label>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
          <label class="gf-form-label width-4">Icon</label>
          <label class="gf-form-label width-2">
            <i class="fa fa-{{item.urlIcon}}"></i>
          </label>
          <input
            class="gf-form-input width-10"
            type="text"
            ng-model="item.urlIcon"
            bs-typeahead="editor.getFAIconClasses"
            bs-tooltip="'The icon for URL link'"
            data-placement="top"
            ng-blur="ctrl.render()"
            data-min-length="0"
            data-items="100"
          />
      </div>
      <div class="gf-form">
          <label class="gf-form-label width-4">Label</label>
          <input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="top"
                 bs-tooltip="'Text for URL link'"
            ng-model="item.urlText" ng-change="ctrl.refresh()">
      </div>

      <div class="gf-form">
        <gf-form-switch class="gf-form" label-class="width-8" label="Lowercase link" checked="item.urlToLowerCase"
          on-change="ctrl.render()">
        </gf-form-switch>
      </div>

      <div class="gf-form">
          <label class="gf-form-label width-8">Date format</label>
          <input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss"
            data-placement="top" bs-tooltip="'Date format for __value_date'"
            bs-typeahead="editor.getValueDateFormats"
            data-min-length="0"
            data-items="100"
            ng-model="item.valueDateFormat"
            ng-blur="ctrl.render()">
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form"></div>
    <div class="gf-form">
      <button class="btn btn-inverse" ng-click="editor.onAddUrl()">
        <i class="fa fa-plus"></i> Add URL
      </button>
    </div>
    <div class="gf-form">
      <button class="btn btn-inverse" ng-click="editor.onRemoveUrls()">
        <i class="fa fa-minus"></i> Remove all
      </button>
    </div>
  </div>
</div>