doc: popover, tooltip

demo/documentation/components/popover/enUS/basic.md

@@ -3,9 +3,9 @@
 <n-popover>
   <template v-slot:activator>
     <n-button style="margin:0;">
-      hover
+      Hover
     </n-button>
   </template>
-  <span>Light My Fire</span>
+  <span>Maybe I don't really want to know how your garden grows</span>
 </n-popover>
 ```

demo/documentation/components/popover/enUS/delay.md

@@ -1,11 +1,13 @@
 # Delay
 ```html
-<n-popover :delay="500" :duration="500">
+<n-popover :delay="500" :duration="500" :width="240">
   <template v-slot:activator>
     <n-button style="margin:0;">
-      hover
+      Delay 500, Duration 500
     </n-button>
   </template>
-  <span>Light My Fire</span>
+  <span>
+    Lately did you ever feel the pain In the morning rain As it soaks it to the bone
+  </span>
 </n-popover>
 ```

demo/documentation/components/popover/enUS/index.md

@@ -39,5 +39,5 @@ manual-position
 ## Events
 |Name|Parameter|
 |-|-|
-|show|()|
+|show|`()`|
-|hide|()|
+|hide|`()`|

demo/documentation/components/popover/enUS/manualPosition.md

@@ -2,7 +2,7 @@
 ```html
 <div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
 <n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>
-  666
+  Cool!
 </n-popover>
 ```
 ```js

demo/documentation/components/popover/enUS/noArrow.md

@@ -1,11 +1,11 @@
 # No Arrow
 ```html
-<n-popover :arrow="false">
+<n-popover :show-arrow="false">
   <template v-slot:activator>
     <n-button style="margin:0;">
-      hover
+      Hover
     </n-button>
   </template>
-  <span>Light My Fire</span>
+  <span>Like a rect</span>
 </n-popover>
 ```

demo/documentation/components/popover/enUS/rawContent.md

@@ -1,9 +1,9 @@
 # Raw Content
 ```html
-<n-popover raw :arrow="false">
+<n-popover raw :show-arrow="false">
   <template v-slot:activator>
     <n-button style="margin:0;">
-      hover
+      Hover
     </n-button>
   </template>
   <div

demo/documentation/components/popover/enUS/trigger.md

@@ -2,9 +2,7 @@
 ```html
 <n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
   <template v-slot:activator>
-    <n-button>
+    <n-button>Hover</n-button>
-      California Girls(Hover)
-    </n-button>
   </template>
   <span>
     I wish they all could be California girls
@@ -13,7 +11,7 @@
 <n-popover :show="showPopover" placement="bottom" trigger="manual">
   <template v-slot:activator>
     <n-button @click="showPopover = !showPopover">
-      California Girls(Manual)
+      Manual
     </n-button>
   </template>
   <span>
@@ -23,7 +21,7 @@
 <n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
   <template v-slot:activator>
     <n-button>
-      California Girls(Click)
+      Click
     </n-button>
   </template>
   <span>

demo/documentation/components/popover/enUS/width.md

@@ -3,9 +3,9 @@
 <n-popover :width="500">
   <template v-slot:activator>
     <n-button style="margin:0;">
-      hover
+      Width 500px
     </n-button>
   </template>
-  <span>Light My Fire</span>
+  <span>Looks like a bar</span>
 </n-popover>
 ```

demo/documentation/components/popover/zhCN/basic.md

@@ -0,0 +1,11 @@
+# 基础用法
+```html
+<n-popover>
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      悬浮
+    </n-button>
+  </template>
+  <span>或许不想知道你的花园长得咋样</span>
+</n-popover>
+```

demo/documentation/components/popover/zhCN/delay.md

@@ -0,0 +1,13 @@
+# 延迟
+```html
+<n-popover :delay="500" :duration="500" :width="240">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      延迟 500ms, 持续 500ms
+    </n-button>
+  </template>
+  <span>
+    Lately did you ever feel the pain In the morning rain as it soaks it to the bone
+  </span>
+</n-popover>
+```

demo/documentation/components/popover/zhCN/event.md

@@ -0,0 +1,78 @@
+# 事件
+```html
+<n-popover
+  placement="bottom"
+  :width="200"
+  trigger="hover"
+  style="margin-right: 12px;"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      悬浮
+    </n-button>
+  </template>
+  <span>
+    我希望她们都是加州女孩
+  </span>
+</n-popover>
+<n-popover
+  placement="bottom"
+  :width="200"
+  trigger="click"
+  style="margin-right: 12px;"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      点击
+    </n-button>
+  </template>
+  <span>
+    我希望她们都是加州女孩
+  </span>
+</n-popover>
+<n-popover
+  :show="showPopover"
+  placement="bottom"
+  :width="200"
+  trigger="manual"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      点击
+    </n-button>
+  </template>
+  <span>
+    我希望她们都是加州女孩
+  </span>
+</n-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    };
+  },
+  methods: {
+    handleShow() {
+      this.$NMessage.success("show popover");
+    },
+    handleHide() {
+      this.$NMessage.success("hide popover");
+    }
+  }
+};
+```
+
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/popover/zhCN/index.md

@@ -0,0 +1,43 @@
+# Popover 弹出信息
+
+Popover 在内容周围弹出一些隐藏的信息。Popover 里面没什么内置样式，在里面填什么主要靠你了。
+
+如果你只想展示一些基本的文本内容，使用 [Tooltip](n-tooltip)。
+
+## 例子
+
+```demo
+basic
+delay
+no-arrow
+trigger
+event
+placement
+raw-content
+width
+manual-position
+```
+
+## Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
+|delay|`number`|`0`||
+|duration|`number`|`300`||
+|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
+|arrow|`boolean`|`false`||
+|raw|`boolean`|`false`||
+|disabled|`boolean`|`false`||
+|manuallyPositioned|`boolean`|`false`||
+|x|`number`|`null`||
+|y|`number`|`null`||
+|filp|`boolean`|`true`||
+|controller|`object`|`null`||
+|overlay-class|`string`|`null`||
+|overlay-style|`object`|`null`||
+
+## Events
+|名称|参数|
+|-|-|
+|show|`()`|
+|hide|`()`|

demo/documentation/components/popover/zhCN/manualPosition.md

@@ -0,0 +1,29 @@
+# 手动定位
+```html
+<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
+<n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>
+  厉害！
+</n-popover>
+```
+```js
+export default {
+  methods: {
+    handleClick(e) {
+      if (this.showPopover) {
+        this.showPopover = false
+      } else {
+        this.showPopover = true
+        this.x = e.clientX
+        this.y = e.clientY
+      }
+    }
+  },
+  data () {
+    return {
+      showPopover: false,
+      x: 0,
+      y: 0
+    }
+  }
+}
+```

demo/documentation/components/popover/zhCN/noArrow.md

@@ -0,0 +1,11 @@
+# 不要箭头
+```html
+<n-popover :show-arrow="false">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      悬浮
+    </n-button>
+  </template>
+  <span>没有箭头就是矩形了</span>
+</n-popover>
+```

demo/documentation/components/popover/zhCN/placement.md

@@ -0,0 +1,139 @@
+# 位置
+```html
+<div class="popover-grid">
+  <n-popover placement="top-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
+        Top Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="top" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
+        Top
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="top-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
+        Top End
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="left-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
+        Left Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="left" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
+        Left
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="left-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
+        Left End
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="right-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
+        Right Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="right" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
+        Right
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="right-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
+        Right End
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="bottom-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
+        Bottom Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="bottom" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
+        Bottom
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+  <n-popover placement="bottom-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
+        Bottom End
+      </n-button>
+    </template>
+    <div class="large-text">
+      啊！
+    </div>
+  </n-popover>
+</div>
+```
+
+```css
+.popover-grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-gap: 12px;
+  justify-content: center;
+  align-items: center;
+}
+
+.large-text {
+  font-size: 48px;
+}
+```

demo/documentation/components/popover/zhCN/rawContent.md

@@ -0,0 +1,22 @@
+# 不用基础样式
+```html
+<n-popover raw :show-arrow="false">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      悬浮
+    </n-button>
+  </template>
+  <div
+    style="width: 100px; height: 100px; background-color: red; transform-origin: inherit;"
+  >
+    Who kicks a hole in the sky so the heaven cry over me.
+  </div>
+</n-popover>
+```
+```js
+export default {
+  data() {
+    return {}
+  }
+}
+```

demo/documentation/components/popover/zhCN/trigger.md

@@ -0,0 +1,45 @@
+# 触发方式
+```html
+<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
+  <template v-slot:activator>
+    <n-button>悬浮</n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover :show="showPopover" placement="bottom" trigger="manual">
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      手动
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
+  <template v-slot:activator>
+    <n-button>
+      点击
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+```
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/popover/zhCN/width.md

@@ -0,0 +1,11 @@
+# 宽度
+```html
+<n-popover :width="500">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      宽度 500px
+    </n-button>
+  </template>
+  <span>长得像根条一样</span>
+</n-popover>
+```

demo/documentation/components/tooltip/enUS/arrow.md

@@ -1,11 +1,11 @@
 # Arrow
 ```html
-<n-tooltip arrow>
+<n-tooltip show-arrow>
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+      No, no arrow by default
     </n-button>
   </template>
-  This is the contextual help
+  Different from popover
 </n-tooltip>
 ```

demo/documentation/components/tooltip/enUS/basic.md

@@ -3,9 +3,9 @@
 <n-tooltip>
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+      Duck
     </n-button>
   </template>
-  This is the contextual help
+  If it looks like a duck, walks like a duck, and quacks like a duck...it must be a duck.
 </n-tooltip>
 ```

demo/documentation/components/tooltip/enUS/event.md

@@ -8,7 +8,7 @@
 >
   <template v-slot:activator>
     <n-button>
-      California Girls(Hover)
+      Hover
     </n-button>
   </template>
   <span>
@@ -23,7 +23,7 @@
 >
   <template v-slot:activator>
     <n-button>
-      California Girls(Click)
+      Click
     </n-button>
   </template>
   <span>
@@ -39,7 +39,7 @@
 >
   <template v-slot:activator>
     <n-button @click="showPopover = !showPopover">
-      California Girls(Manual)
+      Manual
     </n-button>
   </template>
   <span>

demo/documentation/components/tooltip/enUS/fixWidth.md

@@ -1,11 +1,11 @@
-# Fix Width
+# Fixed Width
 ```html
-<n-tooltip placement="top-start">
+<n-tooltip placement="top-start" :width="240">
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+       Could be short
     </n-button>
   </template>
-  This is the contextual help
+  Could be long
 </n-tooltip>
 ```

demo/documentation/components/tooltip/enUS/index.md

@@ -1,4 +1,6 @@
 # Tooltip
+It walks like a popover, quacks like a popover but looks a bit different from popover.
+## Demos
 ```demo
 basic
 trigger
@@ -7,4 +9,9 @@ placement
 fix-width
 max-width
 arrow
-```
+```
+## Props
+See [Popover](n-popover#Props)
+
+## Events
+See [Popover](n-popover#Props)

demo/documentation/components/tooltip/enUS/maxWidth.md

@@ -1,9 +1,10 @@
 # Max Width
+Setting max-width is sometimes more useful.
 ```html
 <n-tooltip :max-width="400" trigger="click">
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+      California Girls
     </n-button>
   </template>
   I wish they all could be California girls. I wish they all could be California
@@ -12,7 +13,7 @@
 <n-tooltip :max-width="400" trigger="click">
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+      California Girls
     </n-button>
   </template>
   I wish ...

demo/documentation/components/tooltip/enUS/placement.md

@@ -3,9 +3,9 @@
 <n-tooltip placement="top-start">
   <template v-slot:activator>
     <n-button>
-      hello tooltip
+      Top Start
     </n-button>
   </template>
-  This is the contextual help
+  Woo, awesome!
 </n-tooltip>
 ```

demo/documentation/components/tooltip/enUS/trigger.md

@@ -3,7 +3,7 @@
 <n-tooltip placement="bottom" trigger="hover">
   <template v-slot:activator>
     <n-button>
-      California Girls(Hover)
+      Hover
     </n-button>
   </template>
   <span>
@@ -13,17 +13,17 @@
 <n-tooltip placement="bottom" trigger="click">
   <template v-slot:activator>
     <n-button>
-      California Girls(Click)
+      Click
     </n-button>
   </template>
   <span>
     I wish they all could be California girls
   </span>
 </n-tooltip>
-<n-tooltip v-model="showPopover" placement="bottom" trigger="manual">
+<n-tooltip :show="showPopover" placement="bottom" trigger="manual">
   <template v-slot:activator>
     <n-button @click="showPopover = !showPopover">
-      California Girls(Manual)
+      Manual
     </n-button>
   </template>
   <span>

demo/documentation/components/tooltip/zhCN/arrow.md

@@ -0,0 +1,11 @@
+# 箭头
+```html
+<n-tooltip show-arrow>
+  <template v-slot:activator>
+    <n-button>
+      是的，默认没有箭头
+    </n-button>
+  </template>
+  和 Popover 不一样
+</n-tooltip>
+```

demo/documentation/components/tooltip/zhCN/basic.md

@@ -0,0 +1,11 @@
+# 基础用法
+```html
+<n-tooltip>
+  <template v-slot:activator>
+    <n-button>
+      鸭子
+    </n-button>
+  </template>
+  如果它长得像鸭子，走起来像鸭子，叫起来也像鸭子，那它一定是个鸭子。
+</n-tooltip>
+```

demo/documentation/components/tooltip/zhCN/event.md

@@ -0,0 +1,71 @@
+# 事件
+```html
+<n-tooltip
+  placement="bottom"
+  trigger="hover"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      悬浮
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+<n-tooltip
+  placement="bottom"
+  trigger="click"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      点击
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+<n-tooltip
+  v-model="showPopover"
+  placement="bottom"
+  trigger="manual"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      手动
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+```
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    };
+  },
+  methods: {
+    handleShow() {
+      this.$NMessage.success("show tooltip");
+    },
+    handleHide() {
+      this.$NMessage.success("hide tooltip");
+    }
+  }
+};
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/tooltip/zhCN/fixWidth.md

@@ -0,0 +1,11 @@
+# 定宽
+```html
+<n-tooltip placement="top-start" :width="240">
+  <template v-slot:activator>
+    <n-button>
+      可以很短
+    </n-button>
+  </template>
+  可以很长
+</n-tooltip>
+```

demo/documentation/components/tooltip/zhCN/index.md

@@ -1,3 +1,17 @@
-# Tooltip
+# Tooltip 弹出提示
+它走起来像一个 Popover，叫起来像一个 Popover，但是长得有点区别。
+## 例子
 ```demo
-```
+basic
+trigger
+event
+placement
+fix-width
+max-width
+arrow
+```
+## Props
+参考 [Popover](n-popover#Props)
+
+## Events
+参考 [Popover](n-popover#Props)

demo/documentation/components/tooltip/zhCN/maxWidth.md

@@ -0,0 +1,25 @@
+# 最大宽度
+有时候设定最大宽度还是挺有用的。
+```html
+<n-tooltip :max-width="400" trigger="click">
+  <template v-slot:activator>
+    <n-button>
+      加州女孩
+    </n-button>
+  </template>
+  我希望她们都是加州女孩，我希望她们都是加州女孩，我希望她们都是加州女孩
+</n-tooltip>
+<n-tooltip :max-width="400" trigger="click">
+  <template v-slot:activator>
+    <n-button>
+      加州女孩
+    </n-button>
+  </template>
+  我希望...
+</n-tooltip>
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/tooltip/zhCN/placement.md

@@ -0,0 +1,11 @@
+# 位置
+```html
+<n-tooltip placement="top-start">
+  <template v-slot:activator>
+    <n-button>
+      上边一开始
+    </n-button>
+  </template>
+  哇哦，Awesome！
+</n-tooltip>
+```

demo/documentation/components/tooltip/zhCN/trigger.md

@@ -0,0 +1,47 @@
+# 触发方式
+```html
+<n-tooltip placement="bottom" trigger="hover">
+  <template v-slot:activator>
+    <n-button>
+      悬浮
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+<n-tooltip placement="bottom" trigger="click">
+  <template v-slot:activator>
+    <n-button>
+      点击
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+<n-tooltip :show="showPopover" placement="bottom" trigger="manual">
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      手动
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-tooltip>
+```
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    };
+  }
+};
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

demo/utils/ComponentDemo.vue

@@ -26,7 +26,7 @@
       <n-tooltip
         :delay="300"
         :placement="'top'"
-        :arrow="true"
+        :show-arrow="true"
         :controller="controller"
       >
         <template v-slot:activator>

packages/common/DataTable/src/HeaderButton/FilterButton.vue

@@ -9,7 +9,7 @@
     <n-popselect
       :value="activeFilterOptionValues"
       cancelable
-      :arrow="false"
+      :show-arrow="false"
       :multiple="column.filterMultiple === false ? false : true"
       :options="finalOptions"
       :loading="loading"

packages/common/Popover/src/main.js

@@ -22,6 +22,10 @@ export default {
       default: false
     },
     arrow: {
+      type: Boolean,
+      default: undefined
+    },
+    showArrow: {
       type: Boolean,
       default: true
     },
@@ -31,11 +35,11 @@ export default {
     },
     delay: {
       type: Number,
-      default: 0
+      default: 200
     },
     duration: {
       type: Number,
-      default: 300
+      default: 200
     },
     raw: {
       type: Boolean,
@@ -120,6 +124,7 @@ export default {
         h(NPopoverContent, {
           props: {
             ...props,
+            arrow: props.arrow === undefined ? props.showArrow : props.arrow,
             controller,
             id
           },

packages/common/Popselect/src/Popselect.vue

@@ -41,7 +41,7 @@ export default {
       type: Object,
       default: null
     },
-    arrow: {
+    showArrow: {
       type: Boolean,
       default: true
     },

packages/common/Tooltip/index.js

@@ -1,4 +1,4 @@
-import Tooltip from './src/main.vue'
+import Tooltip from './src/main.js'
 
 Tooltip.install = function (Vue) {
   Vue.component(Tooltip.name, Tooltip)

packages/common/Tooltip/src/main.js

@@ -0,0 +1,31 @@
+/**
+ * Tooltip: popover wearing waistcoat
+ */
+import NPopover from '../../Popover'
+
+export default {
+  name: 'NTooltip',
+  functional: true,
+  props: {
+    ...NPopover.props,
+    showArrow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render (h, context) {
+    const slots = context.scopedSlots
+    return h(NPopover, {
+      on: context.listeners,
+      props: {
+        ...context.props,
+        containerClass: 'n-tooltip',
+        overlayClass: 'n-tooltip-content'
+      },
+      scopedSlots: {
+        activator: () => slots.activator && slots.activator(),
+        default: () => slots.default && slots.default()
+      }
+    })
+  }
+}

packages/common/Tooltip/src/main.vue

@@ -1,84 +0,0 @@
-<script>
-/**
- * Tooltip: popover wearing waistcoat
- */
-import NPopover from '../../Popover'
-
-const DEFAULT_DURATION = 200
-const DEFAULT_DELAY = null
-
-export default {
-  name: 'NTooltip',
-  functional: true,
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom'
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    delay: {
-      type: [String, Number],
-      default: DEFAULT_DELAY
-    },
-    duration: {
-      type: [String, Number],
-      default: DEFAULT_DURATION,
-      /**
-       * make sure it is a positive number...
-       */
-      validator (value) {
-        value = Number(value)
-        if (Number.isNaN(value)) {
-          return false
-        } else {
-          return value > 0
-        }
-      }
-    },
-    trigger: {
-      default: 'hover',
-      validator (value) {
-        return ['click', 'hover', 'manual'].includes(value)
-      }
-    },
-    arrow: {
-      default: false,
-      type: Boolean
-    },
-    width: {
-      type: Number,
-      default: null
-    },
-    maxWidth: {
-      type: Number,
-      default: null
-    },
-    controller: {
-      type: Object,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  render (h, context) {
-    const slots = context.scopedSlots
-    return h(NPopover, {
-      on: context.listeners,
-      props: {
-        ...context.props,
-        containerClass: 'n-tooltip',
-        overlayClass: 'n-tooltip-content'
-      },
-      scopedSlots: {
-        activator: () => slots.activator && slots.activator(),
-        default: () => slots.default && slots.default()
-      }
-    })
-  }
-}
-</script>