BootStrap tooltip与UIkit tooltip对比

BootStrap的tooltip

也就是工具提示，举个例子.
一般是在按钮或者链接上创建tooltip。如下，先给链接或者按钮加上data-toggle="tooltip"的属性，之后那个title属性就是代表tootip的内容。
这只是设置好了tootip，要激活的话还得写js代码。如例子中首先利用属性选择，之后再利用tooltip方法。

image.png

<h4>工具提示（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.

<h4>工具提示（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>

<script>
    $(function () {
        $("[data-toggle='tooltip']").tooltip(); 
        //select tootip 
    });
</script>

结果如图

image.png

设置提示弹出位置

如何设置提示弹出的位置，如上的默认弹出是从button的上部中间弹出，那么从右边弹出该如何弄？加一个参数data-placement

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"  title="默认的 Tooltip"> 默认的 Tooltip</button>

结果如图

image.png

UIkit的tooltip

同理，也是button和链接都可以设置tootip。title设置tooltip的内容。
不过UIkit的tootip无需再写js代码，直接生效。

<button class="uk-button" data-uk-tooltip title="this is a test">click</button>

结果如图

image.png

还应该注意的是UIkit的标准组件是不带tootip的，得单独从附加组件里引进。

UIkit设置提示弹出位置

uikit并没有新增参数，而是把位置写在了data-uk-tooltip属性里。

<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="this is a test">click</button>

image.png

参考

Bootstrap 提示工具（Tooltip）插件 | 菜鸟教程