<div id="app">
  <v-app id="inspire">
    <v-container fuild>
      <v-row>
        <v-col cols="12">
          <div class="text-center d-flex align-center px-6">
            <p>Tooltip With Template</p>
          </div>
          <div class="text-center d-flex align-center mx-4 px-6">
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon color="primary" dark v-bind="attrs" v-on="on">mdi-note</v-icon>
              </template>
              <span>My Tooltip</span>
            </v-tooltip>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <div class="text-center d-flex align-center px-6">
            <p>Tooltip With Custom Component (Render Function)</p>
          </div>
          <div class="text-center d-flex align-center mx-4 px-6">
            <custom-icon-tooltip tooltip="My Custom Icon Tooltip" />
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <div class="text-center d-flex align-center px-6">
            <p>Tooltip With Custom Component - Custom Icon (Render Function)</p>
          </div>
          <div class="text-center d-flex align-center mx-4 px-6">
            <custom-icon-tooltip tooltip="My Custom Icon Tooltip" icon="mdi-home" />
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

const CustomIconTooltip = {
  name: "CustomIconTooltip",
  props: {
    tooltip: String,
    icon: String
  },
  render(createElement) {
    return createElement(
      "v-tooltip",
      {
        attrs: { bottom: true },
        scopedSlots: {
          // Slot Name
          activator: ({ on }) => {
            return createElement(
              "v-icon",
              {
                attrs: { color: "primary", dark: true },
                on: on
              },
              `${this.icon ? `${this.icon}` : `mdi-note`}`
            );
          }
        }
      },
      this.tooltip
    );
  }
};

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  components: { CustomIconTooltip }
});