jQuery MiniUI

标题: mini.ToolTip用法 [打印本页]

作者: zidieq 时间: 2023-6-13 15:02:33 标题: mini.ToolTip用法

我有点愚钝，看完API手册和例子还是没有太明白。
jQuery MiniUI V3.0 Api Documentation
API手册里面说有两个属性
一个是placement，但是看例子里面，这个placement是定义在html标签里面的，而且是data-placement属性
另一个是selector，激发提示框的选择器。常用: "[data-tooltip], [title]"，我以为是css选择器，于是有了如下代码

<input type="button" value="left" my-msg="hello miniui" data-placement="left"/>

复制代码

var tip = new mini.ToolTip();
tip.set({
target: document,
selector: '[my-msg],[data-tooltip], [title]'
});

复制代码

但是页面上是没有反应的
想问下这个selector具体是怎么个用法哦

作者: bailizuiri 时间: 2023-6-13 21:30:13

只能用 title 和 data-tooltip 这两个属性描述提示信息，自定义的属性貌似是不支持的。

作者: zidieq 时间: 2023-6-14 08:36:11

bailizuiri 发表于 2023-6-13 21:30
只能用 title 和 data-tooltip 这两个属性描述提示信息，自定义的属性貌似是不支持的。 ...

哈哈，我觉得也是，而且title是可写可不写的，data-tooltip是写了才生效。

作者: felt 时间: 2023-6-14 11:36:55

zidieq 发表于 2023-6-14 08:36
哈哈，我觉得也是，而且title是可写可不写的，data-tooltip是写了才生效。

默认的选择器html标签上的title属性。有title使用了tooltip，就会自动出现。
主动的话可以用样式来控制
selector:".aa"

<input type="button" title="Aaa" data-placement="left" class="aa" style="margin-left:300px" value="按钮1"/>
</br>
<input type="button" title="Bbb" data-placement="top" style="margin-left:300px" value="按钮2"/>
</br>
<input type="button" data-placement="bottom" style="margin-left:300px" value="按钮3" data-tooltip="Ccc"/>
var tip = new mini.ToolTip();
tip.set({
target: document,
selector: '[title],[data-tooltip]'
// selector:'.aa'
});

复制代码

更多可以看一下试用包内demo/tooltip/grid.html，可以更多的控制。

作者: zidieq 时间: 2023-6-14 18:56:58

本帖最后由 zidieq 于 2023-6-14 19:08 编辑

felt 发表于 2023-6-14 11:36
默认的选择器html标签上的title属性。有title使用了tooltip，就会自动出现。
主动的话可以用样式来控制
s ...

哦，就是说selector确实是css选择器。只是tooltip组件会先看标签上有没有title属性，如果没有的话默认就会在onbeforeopen事件里面设置e.cancel=true阻止弹出浮动框，所以我写的那段代码就不弹那个浮动提示框了，但其实是生效了的。

也就是说如果我偏要用自定义的属性来做提示的话，就必需要重写onbeforeopen事件，且设置e.cancel=false弹出浮动框。然后再重写onopen事件来setContent就可以显示出内容来了哦

作者: anfieldfan 时间: 2023-8-1 10:50:36 标题: 解答

本帖最后由 anfieldfan 于 2023-8-1 10:52 编辑

这种服务器太高端了吧

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)