Изменение ядра-подсказка цвета фона по умолчанию

Question

У меня есть следующий код .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> 

Он отображает, как показано ниже

Как я могу сделать черный фон красного цвета. Спасибо

Answer 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>