Rabbitzzc / step-tooltip

step by step tooltip guilder for any website.... lightweight & minify✨✨✨.

Step Tooltip

step by step tooltip guilder for any website... lightweight & minify✨✨✨.

⭐️ Features

• Lightweight, minify.
• Generate arrows from pseudo-classes(before/after).

🤚🎨🤚🎨demo: https://step-tooltip-example.logiczc.vercel.app/

📦 Getting Started

install

# npm 
npm install --save step-tooltip

# yarn
yarn add step-tooltip

usage

import stepTooltip from 'step-tooltip'

stepTooltip()

config

{
  initialText: '哈喽，准备好了解 step-tooltip 了么？',
  steps: [],
  backdropColor: 'rgb(0 0 0 / 0.56)',
  options: {
    backLabel: '上一步',
    nextLabel: '下一步',
    skipLabel: '我知道了',
    doneLabel: '完成',
  }
}

config	func	default
initialText	first show text	哈喽，准备好了解 step-tooltip 了么？
steps	every step	[]
backdropColor	backdrop element box-shadow color	'rgb(0 0 0 / 0.56)'
options	other config	1. backLabel: 上一步 2. nextLabel: 下一步 3. skipLabel: 我知道了 4. doneLabel: 完成

🔖 LICENSE

MIT

✈️ Thanks

• cssarrowplease, css arrow.