diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f6c76d51b6..480ff65973a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
# [`master`](https://github.com/elastic/eui/tree/master)
- Modified `link` and all buttons to support both href and onClick ([554](https://github.com/elastic/eui/pull/554))
+- Added `color` prop to `EuiIconTip` ([580](https://github.com/elastic/eui/pull/580))
# [`0.0.34`](https://github.com/elastic/eui/tree/v0.0.34)
diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js
index 1c40b4fbd10..441c47ce812 100644
--- a/src-docs/src/views/tool_tip/icon_tip.js
+++ b/src-docs/src/views/tool_tip/icon_tip.js
@@ -32,6 +32,7 @@ export default () => (
diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js
index e804f803ddb..0619e4de5b5 100644
--- a/src-docs/src/views/tool_tip/tool_tip_example.js
+++ b/src-docs/src/views/tool_tip/tool_tip_example.js
@@ -75,7 +75,8 @@ export const ToolTipExample = {
It accepts all the same props as EuiToolTip.
- For convenience, you can also specify an optional icon type prop.
+ For convenience, you can also specify optional icon type and
+ color props.
),
diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
index 4567c32c117..aab0c0f70e0 100644
--- a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
+++ b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
@@ -24,6 +24,30 @@ exports[`EuiIconTip is rendered 1`] = `
`;
+exports[`EuiIconTip props color is rendered as the icon color 1`] = `
+
+
+
+`;
+
exports[`EuiIconTip props type is rendered as the icon 1`] = `
(
+export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, ...rest }) => (
-
+
);
@@ -16,6 +16,11 @@ EuiIconTip.propTypes = {
*/
type: PropTypes.string,
+ /**
+ * The icon color.
+ */
+ color: PropTypes.string,
+
/**
* Explain what this icon means for screen readers.
*/
diff --git a/src/components/tool_tip/icon_tip.test.js b/src/components/tool_tip/icon_tip.test.js
index 37775d5fb9c..7b5e8f049a9 100644
--- a/src/components/tool_tip/icon_tip.test.js
+++ b/src/components/tool_tip/icon_tip.test.js
@@ -25,5 +25,16 @@ describe('EuiIconTip', () => {
.toMatchSnapshot();
});
});
+
+ describe('color', () => {
+ test('is rendered as the icon color', () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
});
});