foreword
CSS
Native title
attributes are too ugly and need to be rewritten
Effect
transform
HTML
- Code line 2,
tip-label
custom attribute
<div class="tools">
<div class="btn tip" v-for="item of list" :key="item.icon" :tip-label="item.label">
<i :class="item.icon" />
</div>
</div>
css
- Line 6 of the code, use the function
attr
to gettip-label
the value of the attribute; - Lines 17 and 18 of the code, debug according to the specific function effect;
- Lines 23 and 29 of the code are used for display;
.tip {
cursor: pointer;
position: relative;
}
.tip:after {
content: attr(tip-label);
white-space: nowrap;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 1;
border: 1px solid #9E9D24;
background: #F0F4C3;
color: #9E9D24;
position: absolute;
right: -10%;
top: 45px;
padding: 4px 10px;
line-height: 1.6;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: .382s ease;
transform: translateY(-50%);
}
.tip:hover:after {
opacity: 1;
transform: translateY(0%);
}
complete example
<template>
<div class="main">
<div class="tools">
<div class="btn tip" v-for="item of list" :key="item.icon" :tip-label="item.label">
<i :class="item.icon" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ label: '放大', icon: 'el-icon-circle-plus' },
{ label: '缩小', icon: 'el-icon-remove' },
{ label: '警告', icon: 'el-icon-warning' },
{ label: '问题', icon: 'el-icon-question' },
{ label: '关闭', icon: 'el-icon-error' },
]
}
}
}
</script>
<style lang="stylus" scoped>
.main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #555;
padding: 30px;
.tools {
width: max-content;
display: flex;
flex-direction: row;
background: #F9FBE7;
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.25);
border-radius: 28px;
padding: 0 32px;
.btn {
cursor: pointer;
i {
color: red;
font-size: 28px;
margin: 5px;
}
}
}
}
.tip {
cursor: pointer;
position: relative;
}
.tip:after {
content: attr(tip-label);
white-space: nowrap;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 1;
border: 1px solid #9E9D24;
background: #F0F4C3;
color: #9E9D24;
position: absolute;
right: -10%;
top: 45px;
padding: 4px 10px;
line-height: 1.6;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: .382s ease;
transform: translateY(-50%);
}
.tip:hover:after {
opacity: 1;
transform: translateY(0%);
}
</style>