JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Darktooltip

    Simple customizable tooltip with confirm option and 3d effects
    Filed under 

    • 🔾13%Overall
    • 137
    • 56.3 days
    • 🕩35
    • 👥7

    darktooltip

    bower badge

    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

    Demo and examples

    rubentd.com/darktooltip

    Show All