Bootstrap: How to avoid tooltips adding `title` & `data-original-title` attributes to DOM?

[ricardopolo]

In Bootstrap Tooltip.js you can use HTML data attributes to define title of the tooltip

<button data-toggle="tooltip" data-placement="left" title="Tooltip on left">Button</button>

And then using Javascript intialize it

  $('[data-toggle="tooltip"]').tooltip()

We have a requirement where we need tooltips without modifiying the HTML (using data attributes). The tooltips are shown in the WYSIWYG Summernote editor and we don't want the user change them using the HTML editor.

So we initialize the tooltips using only Javascript. The title and the placement are specified using JS and not HTML.

  $('[data-toggle="tooltip"]').tooltip({ 'placement': 'left' , 'title' : 'Toolt on left'})

It works. Shows the tooltip as expected but it changes the HTML adding this attributes to the element

data-original-title="" title=""

Do you know why this happen? Do you know if we can avoid this feature and not modifiy the HTML after the tooltip is shown? If not, can we work in a PR to avoid this feature?

Thanks

[cvrebert]

Seems like this might be a minor bug in the JS. Those attributes are being created due to the
typeof ($e.attr('data-original-title')) != 'string' check in https://github.com/twbs/bootstrap/blob/f11a3a31f1382f212f9255671535d87060078355/js/tooltip.js#L321
When there's no data-original-title attribute, the .attr() results in undefined, which isn't a string, so that if is true, and the attribute creation code runs.
I'm not quite sure what the purpose of that check is. I'll try to do some code archaeology to find out.

[cvrebert]

That condition has been there since the original version of the tooltip plugin:
https://github.com/twbs/bootstrap/commit/11721f376d9bdb019f31d3bbb273160d45ff1266#diff-eb8af357ea1148bb9810f632978c69ffR112

[cvrebert]

The original Tipsy commit is https://github.com/jaz303/tipsy/commit/43b7d621ce18761cb522e0fb203e1f6560dcc6e7
(Tweaked to use jQuery in https://github.com/jaz303/tipsy/commit/a663c5cf87a8a788596b051abe644b95f2087c83)

[ricardopolo]

@cvrebert based on the commit title I understand it was an IE6 compatibility fix.
Because boostrap don't support IE6 do you think we can remove this validation?

[cvrebert]

@ricardopolo Read the other commit. It's not strictly IE6-related.

[ricardopolo]

@cvrebert you are right. I just created a PR asking for and optional attributed that does not change the DOM. Should we include the Dist files after grunt in the PR or only the source?

[cvrebert]

It's not necessary to include the dist files.

[augnustin]

This is #14769 I'd like to discuss, but it has been closed in favor of this one, while I'm unclear on how those two are related.

Basically, I don't understand why not doint what @peterblazejewicz suggested:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

As far as I am concerned, I see the tooltip as a title improved (as the title attribute cannot really considered as a UI element as it is now). For this reason, I completely makes sense to read its value when displaying the title.

I guess I'll have to customize my own version of bootstrap again on this.

Thanks for any replies

[DumboJet]

+1
This always created problems for me.
I would really like JS to override the DOM and not change it in any way.
Apart form that, the title attribute has a specific job to do in HTML and taking it over for popover usage seems weird to me. I would understand it for tooltips, but not for popovers.

[MadLittleMods]

:+1:

[akolechkin]

:+1:

[koxu1996]

I found solution here: http://stackoverflow.com/questions/27235776/can-i-still-use-the-title-attribute-on-bootstrap-popovers Add data-selector="true" and you will get original title working.

[webjohan]

Some WCAG validators doesn't like empty title attributes for links and reports errors.

Suggested improvement:

Let the show/hide functions handle the removing/clearing of the title attribute.

show:
(when setting attribute aria-describedby)
Remove title/set title empty

hide:
(when removing aria-describedby)
add the original title back to title-attribute

getTitle:
Don't set title=''

Is this a possible solution? Or is this totally unrelated and I should create a separate issue for this?

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

[1dd0]

just set selector: true property to avoid using (and fixing/overeriding) target element title attribute