The angular2-mdl tooltip is appearing obfuscated

Question

I'm using angular2-mdl and applying the tooltip to header items.
But the tooltip is looking obfuscated.

Nothing was added on purpose for this to happen.

See the index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>App Title</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Page styles -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-red.min.css" />
  <!-- Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>

  <!-- IE Compatibility shims -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
    <![endif]-->
    <!--[if IE]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
      <link href="./assets/ie.css" rel="stylesheet">
    <![endif]-->
  <!-- end shims -->
</body>
</html>

And another part´s of app:

styles.css:

/* You can add global styles to this file, and also import other style files */
mdl-layout mdl-layout-header nav button.mdl-button--icon {
  margin-left: 10px;
  margin-right: 10px;
}

The app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MdlModule } from '@angular-mdl/core';

import { routing } from './app.routing';

import { AppComponent } from './app.component';
import { MainComponent } from './layout/main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdlModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from "app/layout/main/main.component";

const APP_ROUTES: Routes = [

  { path: '', component: MainComponent },

];

export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

and main.component.ts:

<mdl-layout mdl-layout-fixed-header mdl-layout-fixed-drawer>
  <mdl-layout-header>
    <mdl-layout-header-row>
      <mdl-layout-title>App Title</mdl-layout-title>
      <mdl-layout-spacer></mdl-layout-spacer>
      <nav class="mdl-navigation">
        <button mdl-button mdl-button-type="icon" mdl-tooltip-large="Notificações"><mdl-icon>notifications</mdl-icon></button>
        <button mdl-button mdl-button-type="icon" mdl-tooltip-large="Usuário"><mdl-icon>account_circle</mdl-icon></button>

        <button mdl-button #btnSettings="mdlButton" (click)="menuSettings.toggle($event, btnSettings)" mdl-button-type="icon" mdl-ripple mdl-tooltip-large="Opções"><mdl-icon>more_vert</mdl-icon></button>
        <mdl-menu #menuSettings="mdlMenu" mdl-menu-position="bottom-left">
          <mdl-menu-item>Some Action</mdl-menu-item>
          <mdl-menu-item mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
          <mdl-menu-item disabled>Disabled Action</mdl-menu-item>
          <mdl-menu-item>Yet Another Action</mdl-menu-item>
        </mdl-menu>

        <button mdl-button mdl-button-type="icon" mdl-tooltip-large="Logout"><mdl-icon>power_settings_new</mdl-icon></button>
      </nav>
    </mdl-layout-header-row>
  </mdl-layout-header>
  <mdl-layout-drawer>
    <mdl-layout-title>App Title</mdl-layout-title>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link">Link</a>
      <a class="mdl-navigation__link">Link</a>
      <a class="mdl-navigation__link">Link</a>
    </nav>
  </mdl-layout-drawer>
  <mdl-layout-content>
    <!-- Your content goes here -->
  </mdl-layout-content>
</mdl-layout>

The app.component.ts has only the route-outlet .

What was rendered, part 1:

Part 2:

What is wrong?

Answer 1

Solved with:

.mdl-tooltip {
    will-change: unset;
}

.mdl-snackbar {
  will-change: unset;
}

As in https://github.com/mseemann/angular2-mdl/issues/1004

The angular2-mdl tooltip is appearing obfuscated

Question

1 answers

solution1
0 ACCPTED 2017-06-08 16:54:42

The angular2-mdl tooltip is appearing obfuscated

Question

1 answers

solution1 0 ACCPTED 2017-06-08 16:54:42

solution1
0 ACCPTED 2017-06-08 16:54:42