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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:3
  • Comments:17 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
koxu1996commented, Aug 8, 2016

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.

3reactions
1dd0commented, Jan 11, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

data-original-title do not work after adding element to the page
This is achieved by adding the below attributes to the icon ( <i> ) tag. data-toggle='tooltip' data-html='true' title='' data-original- ...
Read more >
How to avoid tooltips adding `title` & `data-original-title` attributes to ...
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 ...
Read more >
Tooltips - Bootstrap
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title ...
Read more >
Tooltips - Bootstrap - University of Houston
The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip....
Read more >
Remove usages of `data-original-title` (#15433) · Issues - GitLab
This attribute gets created and updated automatically by Bootstrap's tooltip JS; we should never be assigning to or reading from it. $ git...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found