Angular material 2 tooltip issue

up vote
0
down vote

favorite

I simply added tooltip to a div like so :

<div  matTooltip="yeayh">

</div>

And added the 2 module below to the parent module :

BrowserAnimationsModule,

MatTooltipModule,

The toolTip is displayed with no issue but I get this in the browser console :

ERROR TypeError: Cannot read property 'matches' of null

    at Object.eval [as updateRenderer] (TooltipComponent.html:1)

    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)

    at checkAndUpdateView (core.js:10463)

    at callViewAction (core.js:10699)

    at execComponentViewsAction (core.js:10641)

    at checkAndUpdateView (core.js:10464)

    at callViewAction (core.js:10699)

    at execEmbeddedViewsAction (core.js:10662)

    at checkAndUpdateView (core.js:10459)

    at callViewAction (core.js:10699)

asked Nov 22 at 15:44

An-droid

3,36452858

It seems like some js is running before the dom is loaded. Can you trace the error?
– itdoesntwork
Nov 22 at 16:11

This is all I get from the console, the issue seems to come from TooltipComponent which is the material component for tooltip. Here I have no idea how to resolve that or at least find where the issue is comming from precisely
– An-droid
Nov 22 at 16:19

You can maybe use chrome debugger in order to trace it.
– itdoesntwork
Nov 22 at 16:22

add a comment |

up vote
0
down vote

favorite

I simply added tooltip to a div like so :

<div  matTooltip="yeayh">

</div>

And added the 2 module below to the parent module :

BrowserAnimationsModule,

MatTooltipModule,

The toolTip is displayed with no issue but I get this in the browser console :

ERROR TypeError: Cannot read property 'matches' of null

    at Object.eval [as updateRenderer] (TooltipComponent.html:1)

    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)

    at checkAndUpdateView (core.js:10463)

    at callViewAction (core.js:10699)

    at execComponentViewsAction (core.js:10641)

    at checkAndUpdateView (core.js:10464)

    at callViewAction (core.js:10699)

    at execEmbeddedViewsAction (core.js:10662)

    at checkAndUpdateView (core.js:10459)

    at callViewAction (core.js:10699)

asked Nov 22 at 15:44

An-droid

3,36452858

It seems like some js is running before the dom is loaded. Can you trace the error?
– itdoesntwork
Nov 22 at 16:11

This is all I get from the console, the issue seems to come from TooltipComponent which is the material component for tooltip. Here I have no idea how to resolve that or at least find where the issue is comming from precisely
– An-droid
Nov 22 at 16:19

You can maybe use chrome debugger in order to trace it.
– itdoesntwork
Nov 22 at 16:22

add a comment |

up vote
0
down vote

favorite

I simply added tooltip to a div like so :

<div  matTooltip="yeayh">

</div>

And added the 2 module below to the parent module :

BrowserAnimationsModule,

MatTooltipModule,

The toolTip is displayed with no issue but I get this in the browser console :

ERROR TypeError: Cannot read property 'matches' of null

    at Object.eval [as updateRenderer] (TooltipComponent.html:1)

    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)

    at checkAndUpdateView (core.js:10463)

    at callViewAction (core.js:10699)

    at execComponentViewsAction (core.js:10641)

    at checkAndUpdateView (core.js:10464)

    at callViewAction (core.js:10699)

    at execEmbeddedViewsAction (core.js:10662)

    at checkAndUpdateView (core.js:10459)

    at callViewAction (core.js:10699)

asked Nov 22 at 15:44

An-droid

3,36452858

I simply added tooltip to a div like so :

<div  matTooltip="yeayh">

</div>

And added the 2 module below to the parent module :

BrowserAnimationsModule,

MatTooltipModule,

The toolTip is displayed with no issue but I get this in the browser console :

ERROR TypeError: Cannot read property 'matches' of null

    at Object.eval [as updateRenderer] (TooltipComponent.html:1)

    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)

    at checkAndUpdateView (core.js:10463)

    at callViewAction (core.js:10699)

    at execComponentViewsAction (core.js:10641)

    at checkAndUpdateView (core.js:10464)

    at callViewAction (core.js:10699)

    at execEmbeddedViewsAction (core.js:10662)

    at checkAndUpdateView (core.js:10459)

    at callViewAction (core.js:10699)

javascript html angular typescript angular-material

asked Nov 22 at 15:44

An-droid

3,36452858

asked Nov 22 at 15:44

An-droid

3,36452858

asked Nov 22 at 15:44

An-droid

3,36452858

asked Nov 22 at 15:44

An-droid

3,36452858

asked Nov 22 at 15:44

An-droid

3,36452858

It seems like some js is running before the dom is loaded. Can you trace the error?
– itdoesntwork
Nov 22 at 16:11

This is all I get from the console, the issue seems to come from TooltipComponent which is the material component for tooltip. Here I have no idea how to resolve that or at least find where the issue is comming from precisely
– An-droid
Nov 22 at 16:19

You can maybe use chrome debugger in order to trace it.
– itdoesntwork
Nov 22 at 16:22

add a comment |

It seems like some js is running before the dom is loaded. Can you trace the error?
– itdoesntwork
Nov 22 at 16:11

This is all I get from the console, the issue seems to come from TooltipComponent which is the material component for tooltip. Here I have no idea how to resolve that or at least find where the issue is comming from precisely
– An-droid
Nov 22 at 16:19

You can maybe use chrome debugger in order to trace it.
– itdoesntwork
Nov 22 at 16:22

It seems like some js is running before the dom is loaded. Can you trace the error?
– itdoesntwork
Nov 22 at 16:11

This is all I get from the console, the issue seems to come from TooltipComponent which is the material component for tooltip. Here I have no idea how to resolve that or at least find where the issue is comming from precisely
– An-droid
Nov 22 at 16:19

You can maybe use chrome debugger in order to trace it.
– itdoesntwork
Nov 22 at 16:22

add a comment |

1 Answer
1

active

oldest

votes

up vote
3
down vote

accepted

Try to change "@angular/cdk" version (e.g. "^6.0.0")

answered Nov 22 at 17:56

Vasyl Semkiv

461

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434382%2fangular-material-2-tooltip-issue%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
3
down vote

accepted

Try to change "@angular/cdk" version (e.g. "^6.0.0")

answered Nov 22 at 17:56

Vasyl Semkiv

461

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

add a comment |

up vote
3
down vote

accepted

Try to change "@angular/cdk" version (e.g. "^6.0.0")

answered Nov 22 at 17:56

Vasyl Semkiv

461

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

add a comment |

up vote
3
down vote

accepted

Try to change "@angular/cdk" version (e.g. "^6.0.0")

answered Nov 22 at 17:56

Vasyl Semkiv

461

Try to change "@angular/cdk" version (e.g. "^6.0.0")

answered Nov 22 at 17:56

Vasyl Semkiv

461

answered Nov 22 at 17:56

Vasyl Semkiv

461

answered Nov 22 at 17:56

Vasyl Semkiv

461

answered Nov 22 at 17:56

Vasyl Semkiv

461

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

add a comment |

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

stackblitz.com/angular/… - here the same problem. So when I changed 'cdk' version the problem is gone
– Vasyl Semkiv
Nov 22 at 18:04

I was using cdk version : 6.4.5
– An-droid
Nov 26 at 9:36

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi