Fxiaoke Developer Manual
Table of Contents

Tooltip

# FxTooltip

Commonly used to display hint information when hovering.

# Attributes

Parameter Description Type Options Default
effect Default theme String dark/light dark
content Display content, can also be passed via slot#content String — —
placement Tooltip position String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
value / v-model Visibility state Boolean — false
disabled Whether Tooltip is disabled Boolean — false
offset Position offset Number — 0
transition Animation effect String — el-fade-in-linear
visible-arrow Whether to show Tooltip arrow. More parameters see Vue-popper (opens new window) Boolean — true
popper-options Parameters for popper.js (opens new window) Object Refer to popper.js (opens new window) documentation { boundariesElement: 'body', gpuAcceleration: false }
open-delay Delay before showing (ms) Number — 0
manual Manual control mode. When true, mouseenter/mouseleave won't trigger Boolean — false
popper-class Custom class name for Tooltip's popper String — —
enterable Whether mouse can enter tooltip Boolean — true
hide-after Auto-hide delay after appearing (ms). 0 means no auto-hide number — 0
tabindex tabindex (opens new window) for Tooltip component number — 0

# Basic Usage

We provide 9 different placement options. Refer to the complete example below to understand and choose your preferred effect.

Top-left Top Top-right
Left-top Left Left-bottom
Right-top Right Right-bottom
Bottom-left Bottom Bottom-right

Use content property to set hover hint. placement determines position format: direction-alignment; Four directions: top, left, right, bottom; Three alignments: start, end, default empty. Example: placement="left-end" shows tooltip on left side with bottom alignment.

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

  <div class="right">
    <fx-tooltip class="item" effect="dark" content="Right Top hint text" placement="right-start">
      <fx-button>Right-top</fx-button>
    </fx-tooltip>
    <fx-tooltip class="item" effect="dark" content="Right Center hint text" placement="right">
      <fx-button>Right</fx-button>
    </fx-tooltip>
    <fx-tooltip class="item" effect="dark" content="Right Bottom hint text" placement="right-end">
      <fx-button>Right-bottom</fx-button>
    </fx-tooltip>
  </div>
  <div class="bottom">
    <fx-tooltip class="item" effect="dark" content="Bottom Left hint text" placement="bottom-start">
      <fx-button>Bottom-left</fx-button>
    </fx-tooltip>
    <fx-tooltip class="item" effect="dark" content="Bottom Center hint text" placement="bottom">
      <fx-button>Bottom</fx-button>
    </fx-tooltip>
    <fx-tooltip class="item" effect="dark" content="Bottom Right hint text" placement="bottom-end">
      <fx-button>Bottom-right</fx-button>
    </fx-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>
Expand Copy

# Theme

Tooltip provides two themes: dark and light.

Dark Light

Change theme via effect property, default is dark.

<fx-tooltip content="Top center" placement="top">
  <fx-button>Dark</fx-button>
</fx-tooltip>
<fx-tooltip content="Bottom center text" placement="left" effect="light">
  <fx-button>Light</fx-button>
</fx-tooltip>
Expand Copy

# Rich Content

Display multi-line text or formatted content.

Multi-line
Second line
Top center

Use named slot content to replace content property.

<fx-tooltip placement="top">
  <div slot="content">Multi-line<br/>Second line</div>
  <fx-button>Top center</fx-button>
</fx-tooltip>
Expand Copy

# Advanced Usage

Additional properties for better customization:

transition customizes show/hide animation (default: fade-in-linear). Set disabled to true to disable tooltip functionality.

This component extends Vue-popper (opens new window), allowing any Vue-popper configurable fields. Refer to API documentation for complete capabilities.

Click to disable tooltip
<template>
  <fx-tooltip :disabled="disabled" content="Click to toggle tooltip" placement="bottom" effect="light">
    <fx-button @click="disabled = !disabled">Click to {{disabled ? 'enable' : 'disable'}} tooltip</fx-button>
  </fx-tooltip>
</template>
<script>
  export default {
    data() {
      return {
        disabled: false
      };
    }
  };
</script>
Expand Copy

:::tip router-link isn't supported inside tooltip - use vm.$router.push instead.

Disabled form elements aren't supported inside tooltip (see MDN (opens new window)). Wrap disabled elements with a container. :::

Calendar
Popover

← Popover→