Jquery-hover-dropdown-box

<link href="jquery-hover-dropdown-box.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-hover-dropdown-box.js"></script>

<div id="example_inline_box"></div>

$(function () {
    $('#example_inline_box').hoverDropdownBox({
        title: 'Example',
        items: {
            "Item A": {
                color: "#e74c3c",
                inputType: "text",
                inputChecked: true,
                inputPlaceholder: "Example input"
            },
            "Item B": {
                color: "#f1c40f",
                inputType: "checkbox",
                inputChecked: false
            },
            "Item C": {
                color: "#2ecc71",
                inputType: "checkbox",
                inputChecked: false
            },
            "Item D": {
                color: "#3498db",
                inputType: "checkbox",
                inputChecked: false
            },
            "Item E": {
                color: "#7f8c8d",
                inputType: "checkbox",
                inputChecked: true
            }
        },
        footer: {
            label: "+ New Item",
            inputPlaceholder: "Input item name",
            inputType: "text",
        },
        onLabelClick: function (key, item) {
            item.checked(!item.checked());
        },
        onChange: function (key, item, value) {
            window.alert("onChange: " + key + " - " + value);
        },
        onTextInput: function (key, item, value) {
            window.alert("onTextInput: " + key + " - " + value);
            if (key == 'footer') {
                console.log(this);
                this.getHoverDropdownBox().addItem(value, {
                    color: "#34495e",
                    type: "checkbox",
                    selected: true
                });
            }
        }
    });
});