Tooltip 提示小窗

简介

axPopup可以解决绝大多数提示场景，但是看上去过于厚重，参数也较复杂，那么我们基于axPopup开发了axTooltip插件，短小明快的进行纯文字提示。

使用方法

插件运行方式有三种：

ax*属性：对按钮标签使用axTooltip属性并搭配content属性即可按默认参数运行插件。
ax*属性：对按钮标签使用axTooltip="文本"属性即可按默认参数运行插件，注意文本中不能包含“:”，否则会被判为传递其他参数。
js实例：通过new axTooltip('#ID')方式创建实例运行。

常规的最简单的 JS打开tooltip

HTML JS

                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国"'>常规的</a>
                                    <a href="###" class="ax-btn" axTooltip="伟大的中国">最简单的</a>
                                    <a href="###" class="ax-btn" id="js">JS打开tooltip</a>

                                            let jsIns = new axTooltip('#js', {
                                                content: '伟大的中国',
                                            });

更换风格

axTooltip支持多种风格，通过theme参数设置风格：primary、success、error、warning、info、question、text（默认）和light。

默认 primary success error warning info ad text light

                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国"'>默认</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"primary"'>primary</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"success"'>success</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"error"'>error</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"warning"'>warning</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"info"'>info</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"question"'>ad</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"text"'>text</a>
                                <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",theme:"light"'>light</a>

尺寸

axTooltip默认是自适应文字宽度，maxwidth是360px，如果需要指定固定宽度可使用size参数：

sm:小型窗口，宽度200rem（200px）
md:中型窗口，宽度360rem（360px）,默认尺寸
lg:大型窗口，宽度600rem（600px）

由于tooltip的特性，不建议使用太宽的尺寸，md以下便满足一般需求了。

sm md lg

                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",size:"sm"'>sm</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",size:"md"'>md</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",size:"lg"'>lg</a>

打开方式

通过trigger参数设置窗口的显示方式：

hover：鼠标经过按钮显示，离开按钮关闭，默认。
click：鼠标点击按钮显示，再次点击关闭。
input：在input中输入的时候显示。
sticky：初始化就显示，再次关闭或打开需要手写js代码。
none：初始化定位在按钮上，并不显示。

hover打开 click打开初始化显示手动显示

HTML JS

                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国"'>hover打开</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",trigger:"click"'>click打开</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",trigger:"sticky"'>初始化显示</a>
                                    <a href="###" class="ax-btn" id="diy">手动显示</a>

                                            let diyButton = document.querySelector('#diy'),
                                                disyIns = new axTooltip(diyButton, {
                                                    trigger: 'none',
                                                    content: '伟大的中国',
                                                });
                                            new axHover(diyButton, {
                                                enter: () => {
                                                    disyIns.popup.show();
                                                },
                                                leave: () => {
                                                    disyIns.popup.hide();
                                                },
                                                hold: diyButton,
                                            });

相对位置

axTooltip继承了axPopup的placement参数，通过该参数设置tooltip打开的相对位置，详细实例请参见axPopup。

top-start top-end bottom-start bottom-end left right

                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"top-start"'>top-start</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"top-end"'>top-end</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"bottom-start"'>bottom-start</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"bottom-end"'>bottom-end</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"left"'>left</a>
                                    <a href="###" class="ax-btn" axTooltip='content:"伟大的中国",placement:"right"'>right</a>

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                    var demo1 = new axTooltip({
                                        insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
                                        placement: 'top', //窗口相对按钮的位置，可填top|top-start|top-end|bottom|bottom-start|bottom-end|left|left-start|left-end|right|right-start|right-end|center
                                        arrow: true, //是否显示指示箭头，默认true显示，可填false不显示
                                        trigger: 'hover', //显示窗口的动作，默认hover显示，可填click点击打开或初始化即展开sticky，或者不显示none
                                        size: '', //窗口尺寸，默认正常尺寸，可填sm,md,lg
                                        multiple: true, //是否允许打开多个窗口，默认允许
                                        theme: 'text', //提示窗风格，可选择primary、success、error、warning、info、question、text（默认）和light（或为空）
                                        content: '', //提示内容，纯文本格式
                                        breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
                                    });
                              });