html in tab title attribute causes browser to show the html tag as tooltip

[D3CK3R]

The title attribute should be removed from tabs after compile, because it causes the browser to show the tag as a tooltip.

<ion-tab data-title="<img src='{{user.logo}}' alt=''>" ng-click="e.stopPropagation()"></ion-tab>

[D3CK3R]

Maybe we could also use a custom attribute for the html data to handle this issue.

[ajoslin]

Thanks! will get to it before 1.0 :-)

[D3CK3R]

Hey Andy, i've tried the latest build and the title tag isn't removed, any idea?

[BendingBender]

It is still possible that angular re-adds the title attribute if it contains interpolations. The following code for example:

<ion-tab title="{{'SOME-TITLE' | translate}}" ui-sref="somestate">
  <ion-nav-view name="some-tab"></ion-nav-view>
</ion-tab>

produces the following output:

<ion-tab
  icon="ui-icon ui-icon-shadow"
  ui-sref="somestate"
  href="#/someref"
  title="Some translated title">
</ion-tab>
<a
  ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}"
  ng-disabled="disabled()"
  class="tab-item"
  icon="ui-icon ui-icon-shadow"
  title="Some translated title">
...
</a>

I've traced it down to the following line in compile.js in AngularJS.

A very easy workaround to not generate a visible title would be to change the line in tab.js to

attrStr('data-title', attr.title) +

which would generate something that the browser doesn't interpret, but I'm not sure whether it's a viable solution or just a hack.