新增tooltip示例

demo/TableDemo.scss

@@ -9,6 +9,7 @@
 @import "../node_modules/bee-checkbox/src/Checkbox.scss";
 @import "../node_modules/bee-select/src/Select.scss";
 @import "../node_modules/bee-form/src/Form.scss";
+@import "../node_modules/bee-popover/src/Popover.scss";
 @import "../node_modules/bee-tooltip/src/Tooltip.scss";
 @import "../src/Table.scss";
 

demo/demolist/Demo1.js

@@ -1,31 +1,70 @@
 /**
 *
-* @title 简单表格
+* @title 简单表格，以及两种tip
+* 一种是bee-popover实现
+* 一种是标签本身的tooltip
 * @description
-*
 */
 
 import React, { Component } from "react";
+import Popover from 'bee-popover';
+import Button from "bee-button";
 import Table from "../../src";
 
+function getTitleTip(text){
+  return(<div>
+      <h3>{text}</h3> 
+  </div>)
+}
+
+
 const columns = [
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "用户名", dataIndex: "a", key: "a", width:80 ,
+  render(text, record, index) {
+    return(<div style={{position: 'relative'}}>
+        <Popover
+            placement="leftTop"
+            content={getTitleTip(text)}
+            trigger="hover"
+            id="leftTop"
+        >
+            <span
+                style={{
+                    position: 'absolute',
+                    top: 5,
+                    left: 0,
+                    width: "80px",
+                    textOverflow:"ellipsis",
+                    overflow:"hidden",
+                    whiteSpace:"nowrap"
+                }}>{text}</span>
+        </Popover>
+    </div>);
+  }},
   {
     title: "操作",
     dataIndex: "d",
     key: "d",
     render(text, record, index) {
       return (
-        <a
+        <div style={{position: 'relative'}} title={text} >
-          href="#"
+            <a
-          onClick={() => {
+                href="#"
-            alert('这是第'+index+'列，内容为:'+text);
+                tooltip={text}
-          }}
+                onClick={() => {
-        >
+                  alert('这是第'+index+'列，内容为:'+text);
-          一些操作
+                }}
-        </a>
+                style={{
+                    position: 'absolute',
+                    top: 5,
+                    left: 0
+                }}
+              >
+                一些操作
+              </a>
+        </div>
       );
     }
   }
@@ -33,7 +72,7 @@ const columns = [
 
 const data = [
   { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
   { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
 ];
 
@@ -45,7 +84,7 @@ class Demo1 extends Component {
         data={data}
         title={currentData => <div>标题: 这是一个标题</div>}
         footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
+      /> 
     );
   }
 }

dist/demo.css

@@ -7481,6 +7481,125 @@ ul {
   top: 2px;
   margin-right: 2px; }
 
+/* FormGroup */
+/*  Navlayout  */
+.u-popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1540;
+  display: none;
+  padding: 1px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: 1.42857143;
+  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: 14px;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
+  .u-popover > .arrow, .u-popover > .arrow:after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid; }
+  .u-popover > .arrow {
+    border-width: 10px; }
+  .u-popover > .arrow:after {
+    border-width: 10px;
+    content: ""; }
+  .u-popover.top, .u-popover.top-right, .u-popover.top-left {
+    margin-top: -10px; }
+    .u-popover.top .arrow, .u-popover.top-right .arrow, .u-popover.top-left .arrow {
+      left: 50%;
+      margin-left: -11px;
+      border-bottom-width: 0;
+      border-top-color: #999;
+      bottom: -11px; }
+      .u-popover.top .arrow:after, .u-popover.top-right .arrow:after, .u-popover.top-left .arrow:after {
+        content: " ";
+        bottom: 1px;
+        margin-left: -10px;
+        border-bottom-width: 0;
+        border-top-color: #fff; }
+  .u-popover.top-right .arrow {
+    left: auto;
+    right: 20px; }
+  .u-popover.top-left .arrow {
+    left: 20px; }
+  .u-popover.right, .u-popover.right-top, .u-popover.right-bottom {
+    margin-left: 10px; }
+    .u-popover.right .arrow, .u-popover.right-top .arrow, .u-popover.right-bottom .arrow {
+      top: 50%;
+      left: -11px;
+      margin-top: -11px;
+      border-left-width: 0;
+      border-right-color: #999; }
+      .u-popover.right .arrow:after, .u-popover.right-top .arrow:after, .u-popover.right-bottom .arrow:after {
+        content: " ";
+        left: 1px;
+        bottom: -10px;
+        border-left-width: 0;
+        border-right-color: #fff; }
+  .u-popover.right-top .arrow {
+    top: 20px; }
+  .u-popover.right-bottom .arrow {
+    top: auto;
+    bottom: 10px; }
+  .u-popover.left, .u-popover.left-top, .u-popover.left-bottom {
+    margin-left: -10px; }
+    .u-popover.left .arrow, .u-popover.left-top .arrow, .u-popover.left-bottom .arrow {
+      top: 50%;
+      right: -11px;
+      margin-top: -11px;
+      border-right-width: 0;
+      border-left-color: #999; }
+      .u-popover.left .arrow:after, .u-popover.left-top .arrow:after, .u-popover.left-bottom .arrow:after {
+        content: " ";
+        right: 1px;
+        border-right-width: 0;
+        border-left-color: #fff;
+        bottom: -10px; }
+  .u-popover.left-top .arrow {
+    top: 20px; }
+  .u-popover.left-bottom .arrow {
+    top: auto;
+    bottom: 10px; }
+  .u-popover.bottom, .u-popover.bottom-right, .u-popover.bottom-left {
+    margin-top: 10px; }
+    .u-popover.bottom .arrow, .u-popover.bottom-right .arrow, .u-popover.bottom-left .arrow {
+      left: 50%;
+      margin-left: -11px;
+      border-top-width: 0;
+      border-bottom-color: #999;
+      top: -11px; }
+      .u-popover.bottom .arrow:after, .u-popover.bottom-right .arrow:after, .u-popover.bottom-left .arrow:after {
+        content: " ";
+        top: 1px;
+        margin-left: -10px;
+        border-top-width: 0;
+        border-bottom-color: #fff; }
+  .u-popover.bottom-right .arrow {
+    right: 20px;
+    left: auto; }
+  .u-popover.bottom-left .arrow {
+    left: 20px; }
+  .u-popover .u-popover-content {
+    padding: 9px 14px; }
+
 /* FormGroup */
 /*  Navlayout  */
 .u-tooltip {

package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "bee-loading": "^1.0.3",
+    "bee-popover": "^1.0.2",
     "bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select",
     "classnames": "^2.2.5",
     "object-path": "^0.11.3",