Add tag support

[bastienrossi]

Hi,

In some cases it can be useful to change the tags of the vue-tippy wrappers. Exemple: Using vue-tippy in <a> tag. All sub tags must be inline like <span> and <div> aren't valid. I suggest to add a tag attribute in order to let user choose.

<a href="/go-to.html">
  <tippy tag="span" placement="top" arrow>
    <template #trigger>
      <img src="/my-icon.svg" alt="my icon" />
      <span>Tippy Trigger</span>
    </template>
  </tippy>
</a>

In order to add default props tag value to div I changed props array to object. But I'm not sure about all types. Can you check if there is no mistake ?

{
  props: {
    to: String,
    toSelector: String,
    toElement: Object,
    content: String,
    enabled: Boolean,
    visible: Boolean,
    triggerTarget: Object,
    tag: {
      type: String,
      default: "div"
    }
  }
}

Thanks

[KABBOUCHI]

@BastienMbz can we have separate tags? tag, contentTag, triggerTag?

or maybe tag can still apply to all 3 elements

contentTag and triggerTag (both nullable/optional) can override the tag original value

<template>
  <component :is="tag">
    <component :is="triggerTag || tag" ref="trigger">
      <slot name="trigger"></slot>
    </component>

    <component :is="contentTag || tag" ref="content">
      <slot></slot>
    </component>
  </component>
</template

[bastienrossi]

@KABBOUCHI Great idea.

I updated my pull request. I changed props due to issues with types in order to avoid regression.

{
props: {
    to: undefined,
    toSelector: undefined,
    toElement: undefined,
    content: undefined,
    enabled: undefined,
    visible: undefined,
    triggerTarget: undefined,
    tag: {
      type: String,
      default: "div"
    },
    triggerTag: String,
    contentTag: String
  }
}