JSDM

HTML

51
1
<script src="//unpkg.com/vue/dist/vue.js"></script>
2
<script src="//unpkg.com/element-ui@2.4.9/lib/index.js"></script>
3
<div id="app">
4
<div class="box">
5
  <div class="top">
6
    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
7
      <el-button>上左</el-button>
8
    </el-tooltip>
9
    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
10
      <el-button>上边</el-button>
11
    </el-tooltip>
12
    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
13
      <el-button>上右</el-button>
14
    </el-tooltip>
15
  </div>
16
  <div class="left">
17
    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
18
      <el-button>左上</el-button>
19
    </el-tooltip>
20
    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
21
      <el-button>左边</el-button>
22
    </el-tooltip>
23
    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
24
      <el-button>左下</el-button>
25
    </el-tooltip>
26
  </div>
27
​
28
  <div class="right">
29
    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
30
      <el-button>右上</el-button>
31
    </el-tooltip>
32
    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
33
      <el-button @click="value=true">右边</el-button>
34
    </el-tooltip>
35
    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
36
      <el-button>右下</el-button>
37
    </el-tooltip>
38
  </div>
39
  <div class="bottom">
40
    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
41
      <el-button>下左</el-button>
42
    </el-tooltip>
43
    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
44
      <el-button>下边</el-button>
45
    </el-tooltip>
46
    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
47
      <el-button>下右</el-button>
48
    </el-tooltip>
49
  </div>
50
</div>
51
</div>
!

CSS

xxxxxxxxxx
33
 
1
@import url("//unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css");
2
.box {
3
    width: 400px;
4
​
5
    .top {
6
      text-align: center;
7
    }
8
​
9
    .left {
10
      float: left;
11
      width: 60px;
12
    }
13
​
14
    .right {
15
      float: right;
16
      width: 60px;
17
    }
18
​
19
    .bottom {
20
      clear: both;
21
      text-align: center;
22
    }
23
​
24
    .item {
25
      margin: 4px;
26
    }
27
​
28
    .left .el-tooltip__popper,
29
    .right .el-tooltip__popper {
30
      padding: 8px 10px;
31
    }
32
  }
33
​
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
new Vue().$mount('#app')
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................