更改核心工具提示默认背景颜色答案

【问题标题】：Changing core-tooltip default background color更改核心工具提示默认背景颜色
【发布时间】：2015-01-28 00:28:54
【问题描述】：

我有以下 .html 代码

<core-tooltip tipAttribute='tipp'
  id='clock-icon-tip'
  style='background-color: blue;'>
  <div tipp
    style='background-color: red; width: 100%; height: 100%;'>
    <p>this is my tool<br> tip</p>

  </div>
  <core-icon id='clock-icon' class='margin-l-b-4px' icon=''></core-icon>
</core-tooltip>

如下图所示

如何使黑色背景颜色变为红色。谢谢

【问题讨论】：

标签： dart dart-polymer material-design core-elements

【解决方案1】：

我将内联样式移至样式标签，因为我认为应该这样做。
我删除了tipAttribute，因为它对我不起作用（可能是最近修复的https://github.com/Polymer/core-tooltip/issues/26）。

<template>
  <style>
      core-tooltip#clock-icon-tip core-icon {
        background-color: blue;
      }

      /* tooltip content */
      core-tooltip#clock-icon-tip > [tip],
      /* tooltip background */
      core-tooltip#clock-icon-tip::shadow .core-tooltip {
        background-color: red;
        /*width: 100%;
        height: 100%;*/
      } 

      /* tooltip arrow 
         (needs a rule for each tooltip position, this is for bottom only */
      core-tooltip#clock-icon-tip::shadow .core-tooltip.bottom::after {
        border-bottom-color: red;
      }

  </style>

  <core-tooltip 
    id='clock-icon-tip'
    >
    <div tip>
      <p>this is my tool<br> tip</p>

    </div>
    <core-icon id='clock-icon' class='margin-l-b-4px' icon=''></core-icon>
  </core-tooltip>
</template>

【讨论】：