Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google chart web component timeline hover patch
<dom-module id="google-chart-styles">
<template>
<style>
:host .google-visualization-tooltip-action:hover {
background-color: #eeeeee;
}
:host .google-visualization-tooltip {
border:solid 1px #bdbdbd;
border-radius: 2px;
background-color: white;
position: absolute;
box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
font-size: 12px;
padding: 0px;
-moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
-webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
z-index: 10000;
}
:host .google-visualization-tooltip-action-list {
list-style-type: none;
margin: 0;
padding: 0.5em 0em 0.5em 0em;
cursor: hand;
}
:host .google-visualization-tooltip-action {
margin: 0;
cursor: pointer;
padding: 0.5em 2em 0.5em 1em;
}
:host .google-visualization-tooltip-action:hover {
background-color: #eeeeee;
}
:host .google-visualization-tooltip-item-list {
list-style-type: none;
margin: 1em 0 1em 0;
padding: 0em;
}
:host .google-visualization-tooltip-item {
margin: 0.65em 0em 0.65em 0em;
padding: 0em 2em 0em 1em;
}
:host .google-visualization-tooltip-item-list
:host .google-visualization-tooltip-item:first-child {
margin: 1em 0em 1em 0em;
}
:host .google-visualization-tooltip-separator {
margin: 0;
padding: 0;
height: 1px;
background-color: #dddddd;
}
:host .google-visualization-tooltip-square {
display: inline-block;
/* IE does not support inline-block fall back to float left */
float: left\9;
clear: none;
width: 0.5em;
height: 0.5em;
margin: 0.16em 0.7em 0em 0em;
border-bottom: solid 0.1em white;
}
</style>
</template>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.