Bootstrap-vue: Tab's "title" prop clashes with HTML attribute

[chris-canipe]

<b-tab>'s title prop prevents the use of the actual title attribute.

If I attempt to wrap <b-tab> in <div title="Tooltip"> or <b-tooltip> the results are:

1. I see no tabs.
2. This warning shows in the console: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

Libraries

• bootstrap-vue — 0.18.0
• vue — Tried both 2.3.3 and 2.4.2

[tmorehouse]

As a workaround, to get a title attribute on the content, you can wrap the _content_ of your <b-tab> in a div which has the title attribute added.

OR are you looking to get the title attribute on the tab's tab button?

Also the current implementation of always wraps the trigger element, and can break.

The title prop supports HTML markup (but not component markup). So you can set the title prop to:

<b-tabs>
  <b-tab title="<span title="tooltip 1">Tab 1</span>" ... >
    <<!-- tab content here -->
  </b-tab>
  <b-tab title="<span title="tooltip 2">Tab 2</span>" ... >
    <<!-- tab content here -->
  </b-tab>
</b-tabs>

[chris-canipe]

I didn't consider title accepting HTML; this is working. Thanks!

[tmorehouse]

Yep... it accepts static HTML, but not dynamic stuff like components.