Element Tooltip 문자 알림 사용 예시

구성 요소-문자 알림
기초 용법

<div class="box">
 <div class="top">
  <el-tooltip class="item" effect="dark" content="Top Left     " placement="top-start">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Top Center     " placement="top">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Top Right     " placement="top-end">
   <el-button>  </el-button>
  </el-tooltip>
 </div>
 <div class="left">
  <el-tooltip class="item" effect="dark" content="Left Top     " placement="left-start">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Left Center     " placement="left">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Left Bottom     " placement="left-end">
   <el-button>  </el-button>
  </el-tooltip>
 </div>

 <div class="right">
  <el-tooltip class="item" effect="dark" content="Right Top     " placement="right-start">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Right Center     " placement="right">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Right Bottom     " placement="right-end">
   <el-button>  </el-button>
  </el-tooltip>
 </div>
 <div class="bottom">
  <el-tooltip class="item" effect="dark" content="Bottom Left     " placement="bottom-start">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Bottom Center     " placement="bottom">
   <el-button>  </el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Bottom Right     " placement="bottom-end">
   <el-button>  </el-button>
  </el-tooltip>
 </div>
</div>

<style>
 .box {
  width: 400px;

  .top {
   text-align: center;
  }

  .left {
   float: left;
   width: 60px;
  }

  .right {
   float: right;
   width: 60px;
  }

  .bottom {
   clear: both;
   text-align: center;
  }

  .item {
   margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
   padding: 8px 10px;
  }
 }
</style>

메시지

<el-tooltip content="Top center" placement="top">
 <el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
 <el-button>Light</el-button>
</el-tooltip>

더 많은 콘 텐 츠

<el-tooltip placement="top">
 <div slot="content">    <br/>     </div>
 <el-button>Top center</el-button>
</el-tooltip>

고급 확장

<template>
 <el-tooltip :disabled="disabled" content="     tooltip   " placement="bottom" effect="light">
  <el-button @click="disabled = !disabled">  {{disabled ? '  ' : '  '}} tooltip   </el-button>
 </el-tooltip>
</template>
<script>
 export default {
  data() {
   return {
    disabled: false
   };
  }
 };
</script>

Attributes


Element Tooltip 문자 알림 에 대한 예제 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Element Tooltip 문자 알림 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!