文字提示 Tip

<c-tip content="甚矣吾衰矣" position="top">
  <c-button primary>上</c-button>
</c-tip>

<c-tip content="怅平生、交游零落，只今余几" position="bottom">
  <c-button primary>下</c-button>
</c-tip>

<c-tip content="白发空垂三千丈，一笑人间万事" position="left">
  <c-button primary>左</c-button>
</c-tip>

<c-tip content="我见青山多妩媚，料青山见我应如是" position="right">
  <c-button primary>右</c-button>
</c-tip>

<template>
  <c-tip position="top" max-width="500px">
    <a href="javascript:;">《摸鱼儿·更能消几番风雨》</a>
    <template slot="content">
      <article>
        更能消 几番风雨 匆匆春又归去<br>
        惜春长怕花开早 何况落红无数<br>
        春且住<br>
        见说道 天涯芳草无归路<br>
        怨春不语<br>
        算只有殷勤 画檐蛛网 尽日惹飞絮<br>
        <br>
        长门事 准拟佳期又误<br>
        蛾眉曾有人妒<br>
        千金纵买相如赋 脉脉此情谁诉<br>
        君莫舞<br>
        君不见 玉环飞燕皆尘土<br>
        闲愁最苦<br>
        休去倚危栏 斜阳正在 烟柳断肠处<br>
      </article>
    </template>
  </c-tip>
  是宋代大词人辛弃疾的作品。此词是一首忧时感世之作。
  上片描写抒情主人公对春光的无限留恋和珍惜之情；
  下片以比喻手法反映全词情调婉转凄恻，柔中寓刚。
  词中表层写的是美女伤春、蛾眉遭妒，实际上是作者借此抒发自己壮志难酬的愤慨和对国家命运的关切之情。
  全词托物起兴，借古伤今，融身世之悲和家国之痛于一炉，沉郁顿挫，寄托遥深。
</template>

<style>
  p { line-height: 2; }
</style>

<template>
  <c-tip disabled content="This will not show.">
    <c-button primary>禁用 tip ~</c-button>
  </c-tip>
</template>

<c-tip
  position="right"
  content="我见青山多妩媚，料青山见我应如是"
  :show-delay="300"
  :hide-delay="100"
>
  <c-button primary>延时</c-button>
</c-tip>

<c-tip theme="light" position="top">
  <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
  <c-button primary>light</c-button>
</c-tip>

<c-tip theme="dark" position="right">
  <div slot="content">
    君莫舞<br>
    君不见 玉环飞燕皆尘土<br>
  </div>
  <c-button primary>dark</c-button>
</c-tip>

<p>
  <c-tip theme="light" position="top" trigger="hover">
    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
    <div>hover</div>
  </c-tip>
</p>

<p>
  <c-tip theme="light" position="top" trigger="focus">
    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
    <a href="javascript:;">focus</span>
  </c-tip>
</p>

<p>
  <c-tip theme="light" position="top" trigger="click">
    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
    <div>click</div>
  </c-tip>
</p>

<p>
  <c-tip theme="light" position="top" :trigger="['hover', 'focus']">
    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
    <a href="javascript:;">hover or focus</a>
  </c-tip>
</p>