mini.ToolTip用法

zidieq

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

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

复制代码

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

复制代码

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

bailizuiri

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

zidieq

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

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

felt

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

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

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

复制代码

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

zidieq

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

这种服务器太高端了吧