Added breadcrumb tooltips

frontend/src/metabase/components/Breadcrumbs.jsx

@@ -3,6 +3,7 @@ import React, { Component, PropTypes } from "react";
 import S from "./Breadcrumbs.css";
 
 import Icon from "metabase/components/Icon.jsx";
+import Tooltip from "metabase/components/Tooltip.jsx";
 
 import cx from 'classnames';
 
@@ -31,20 +32,26 @@ export default class Breadcrumbs extends Component {
             crumb = Array.isArray(crumb) ? crumb : [crumb];
             if (crumb.length > 1) {
                 children.push(
-                    <a
-                        className={cx(breadcrumbClass, S.breadcrumbPath)}
-                        href={crumb[1]}
-                    >
-                        {crumb[0]}
-                    </a>
+                    // TODO: ideally tooltips should only show when element overflows
+                    // but I can't seem to figure out how to actually implement it in React
+                    <Tooltip tooltip={crumb[0]}>
+                        <a
+                            className={cx(breadcrumbClass, S.breadcrumbPath)}
+                            href={crumb[1]}
+                            >
+                            {crumb[0]}
+                        </a>
+                    </Tooltip>
                 );
             } else {
                 children.push(
-                    <h2
-                        className={cx(breadcrumbClass, S.breadcrumbPage)}
-                    >
-                        {crumb}
-                    </h2>);
+                    <Tooltip tooltip={crumb[0]}>
+                        <h2 className={cx(breadcrumbClass, S.breadcrumbPage)}>
+                            {crumb}
+                        </h2>
+                    </Tooltip>
+
+                );
             }
             if (index < crumbs.length - 1) {
                 children.push(<Icon name="chevronright" className={S.breadcrumbDivider} width={12} height={12} />);