I have the following .html code
<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>
It displays as shown below
How can I make the black background color red. Thanks
I moved the inline style to the style tag because I think this is how it should be done.
I removed the tipAttribute
because it didn't work for me (probably https://github.com/Polymer/core-tooltip/issues/26 which was fixed recently).
<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>