fix(aio): remove title attribute from `CodeExampleComponent`

This was causing browser to add an unwanted tooltip that appeared
when the user hovers over the code.

See #17524
This commit is contained in:
Peter Bacon Darwin 2017-07-17 10:38:19 +01:00 committed by Pete Bacon Darwin
parent 36faba1aab
commit 7d0f2cd51e
2 changed files with 9 additions and 0 deletions

View File

@ -65,6 +65,13 @@ describe('CodeExampleComponent', () => {
expect(actual).toBe('Great Example');
});
it('should remove the `title` attribute after initialisation', () => {
TestBed.overrideComponent(HostComponent, {
set: {template: '<code-example title="Great Example"></code-example>'}});
createComponent(oneLineCode);
expect(codeExampleDe.nativeElement.getAttribute('title')).toEqual(null);
});
it('should pass hideCopy to CodeComonent', () => {
TestBed.overrideComponent(HostComponent, {
set: {template: '<code-example hideCopy="true"></code-example>'}});

View File

@ -45,6 +45,8 @@ export class CodeExampleComponent implements OnInit {
this.path = element.getAttribute('path') || '';
this.region = element.getAttribute('region') || '';
this.title = element.getAttribute('title') || '';
// Now remove the title attribute to prevent unwanted tooltip popups when hovering over the code.
element.removeAttribute('title');
this.isAvoid = this.path.indexOf('.avoid.') !== -1;
this.hideCopy = this.isAvoid || getBoolFromAttribute(element, ['hidecopy', 'hide-copy']);