chore: added tooltips to words in glossary (ZNTA_1735)

zanata · Mar 27, 2017 · 17c7c44 · 17c7c44
1 parent 311704d
commit 17c7c44
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 3 deletions.
diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/GlossaryTab.js b/server/zanata-frontend/src/frontend/app/editor/containers/GlossaryTab.js
@@ -4,7 +4,8 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Button, Tab, Table } from 'react-bootstrap'
+import { Button, Tab, Table, Tooltip, OverlayTrigger }
+  from 'react-bootstrap'
 import GlossarySearchInput from '../components/GlossarySearchInput'
 import IconButton from '../components/IconButton'
 import { glossarySearchTextEntered } from '../actions/glossary'
@@ -15,6 +16,12 @@ import { Icon, LoaderText } from '../../components'
 const logDetailsClick = () => {
 }
 
+const tooltip = (
+  <Tooltip>
+    longwordtextthingy
+  </Tooltip>
+)
+
 const GlossaryTab = React.createClass({
   propTypes: {
     // eventKey prop to use for the bootstrap Tab
@@ -62,10 +69,14 @@ const GlossaryTab = React.createClass({
       return (
         <tr key={index}>
           <td id="long-string" data-filetype="text" className="gloss-text">
-            <span>{term.source.content}</span>
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <Button bStyle="link"><span>{term.source.content}</span></Button>
+            </OverlayTrigger>
           </td>
           <td id="long-string" data-filetype="text" className="gloss-text">
-            <span>{term.target.content}</span>
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <Button bStyle="link"><span>{term.target.content}</span></Button>
+            </OverlayTrigger>
           </td>
           <td>
             <Button title="copy"

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Sidebar/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Sidebar/index.css
@@ -148,13 +148,69 @@ table td button.gButton--link {
 }
 
 #long-string {
+  max-width: 40%;
   width: 40%;
 }
 
 #long-string span,
 #long-string span {
   white-space: normal;
   width:auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: normal; 
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: 1.333em;
+  text-align: left;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  font-size: 0.857rem;
+  border-color:#333;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip.top {
+  margin-top: -0.75em;
+  padding: 0.375em 0;
+}
+
+.tooltip-inner {
+  max-width: 15rem;
+  padding: 0.5em;
+  color: #fff;
+  text-align: center;
+  background-color: #333;
+  border-radius:3px;
+  border: solid 2px #333;
+}
+
+.tooltip.top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  border-width: 5px 5px 0;
+  border-top-color: #333;
 }
 
 table td {