Simple customizable tooltip wi
darktooltip
Demo and examples
A simple customizable tooltip with confirm option and effects
Usage<div style="padding:200px;"> <a href="#" id="example" data-tooltip="Hello world 1">Example 1</a> <a href="#" id="light" data-tooltip="Hello world 2">Example 2</a> </div> <script> $(document).ready( function(){ //Basic $('#example').darkTooltip(); //With some options $('#light').darkTooltip({ animation:'flipIn', gravity:'west', confirm:true, theme:'light', arrow:true }); }); </script> Options
| Option | Values | Default |
|---|---|---|
| opacity | 0 – 1 | 0.9 |
| content | Tooltip message | empty |
| size | small, medium, large | medium |
| gravity | south, west, north, east | south |
| theme | dark, light | dark |
| trigger | hover, click | hover |
| animation | none, flipIn, fadeIn | none |
| confirm | true, false | false |
| yes | Label for ‘Yes’ option | ‘Yes’ |
| no | Label for ‘No’ option | ‘No’ |
| finalMessage | A message that appears at the end of the action for the confirm | ” |
| finalMessageDuration | Duration of the final message in ms | 1000 |
| onYes | Function that is triggered when clicking ‘Yes’ on confirm | empty |
| onNo | Function that is triggered when clicking ‘No’ on confirm | empty |
| arrow | true, false | true |
rubentd.com/darktooltip
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
