npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@beisen/tool-tip

v0.1.102

Published

### 功能

Downloads

378

Readme

ToolTip使用说明

功能

用于文字提示

使用说明

tip默认向上显示,当向上显示不下时,会向下显示  

使用方法

1. 将组件包裹在需要有提示信息的元素的外部,每个组件内部只能有一个元素
2. 适用于行内元素 如input、button、a和有span包裹的文字等  
3. 一般情况下只需要设置title值即可
4. 可以传简易的html标签  

项目运行、打包

* `cnpm install` 或 `npm install`
* `npm run dev` (开发环境打包 port:8080)
* `npm run build` (生产环境打包)  

使用参数

  • title : 提示内容 //需要提示的内容文字,必须是字符串

  • hidden: 组件是否隐藏 可选参数 :true,false 默认不隐藏, 可不设置

  • side :组件是否左右显示 可选参数 true ,false 默认为false 可不设置,一般情况下均为false

  • alwaysShowTips: 总是显示tooltip,默认为false,该参数和组件显示特性有关(该组件只有当包裹文字宽度大于外部宽度,即出现...这种显示不全的情况下才会显示tooltip)

  • htmlTag: 数组格式,['<center>', '<a>'] 为防止xss攻击,自定义允许渲染的html标签,组件内默认为 <span>,<p>,</br>,<br/> 凡是含有其他标签的字符串,均不会处理为html

  • tipsPosition: 'bottom' 目前仅支持bottom参数,当设置该参数为bottom时,tips会向下显示, 默认为自适应判断

  • tipsReason: "功能说明" 如果有该参数,未打点情况下会优先显示该参数,打点情况下会显示两行说明,如下显示

  • 名称

  • B: 说明

  • tipsDes: "功能描述", 自定义前置描述 B

ToolTip组件调用方法

1.安装npm组件包

npm install @beisen/tool-tip --save-dev  

2.引用组件

import ToolTip from "src/index"  

3.传入参数
该参数为上述参数,传入方式使用: {...参数}

export default class TestToolTip extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        let data = {
            title: '提示内容',
            hidden: false,
            side: true,
            alwaysShowTips: true,
            tipsPosition: 'buttom',
            htmlTag: ["<span>"], //组件内默认为 <span>,<p>,</br>,<br/>凡是含有其他标签的字符串,均不会处理为html
            tipsReason: 'reason',
            tipsDes: "des" 
        }
        return(
            <div> 
                <ToolTip {...data}> 
                    <input />
                </ToolTip>
            </div>
         ) 
    }
}  
    <ToolTip title='提示内容'> 
      <a href="#">内容热区</a>
    </ToolTip>
    <ToolTip title={data} side={true}> 
      <span>内容热区<span>  //左右自适应显示
    <ToolTip>
    <ToolTip title={v.text}> 
      <img href="#">内容热区 />
    </ToolTip>