Tooltip and popup

by tomwilliams

HTML

<script src="https://portal.paragonautomotivegroup.co.uk/lib/KendoVersions/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://portal.paragonautomotivegroup.co.uk/lib/KendoVersions/2013.2.918/css/kendo.blueopal.min.css">
<link rel="stylesheet" href="https://portal.paragonautomotivegroup.co.uk/lib/KendoVersions/2013.2.918/css/kendo.common.min.css">
  
<br/>
<br/>
<br/>



<div id="grdVehicleAttributes"></div> 


  <div id="tagWindow" style="display: none">
        <div id="tags"></div>
        <ul class="k-reset" unselectable="on" role="listbox" style="padding-top: 25px">
            <li class="k-button CloseTags" unselectable="on"><span unselectable="on" class="FilterTag">Close</span></li>
        </ul>
    </div>

    <script id="tags-template" type="text/x-kendo-template">
        <center>
            <div style="padding: 4px 0px 0px 0px; margin: 0px 0px 0px 0px; height: 26px; width: 24px">
                    <div class="tagFunction tooltip" style="width:30px">
                    <img class="tagImg" alt="cameraicon.jpg" src="https://portal.paragonautomotivegroup.co.uk/ipress/Extern/Images/tag-lightGrey.png" height="18px" style="border-style:none "/>
                 </div>
            </div>

        </center>
    </script>

JavaScript

var Tagwindow,
             TagDetailWindow,
             TagApplied;


$(document).ready(function() {
    GetVehicleAttributes();
});

function GetVehicleAttributes() {

    var JsonAttributes = [{"AttributeCode":"","AttributeType":"Make","AttributeValue":"SEAT","ID":3378592,"VIN":"VSSZZZ6JZDR051504","Tag":"Hello", "TagsCountForUser" :1},{"AttributeCode":"","AttributeType":"Model","AttributeValue":"IBIZA          ","ID":3378593,"VIN":"VSSZZZ6JZDR051504","Tag":"", "TagsCountForUser" :0},{"AttributeCode":"","AttributeType":"Derivative","AttributeValue":"Ibiza 5dr (2012) SE 1.6 TDI CR 105 PS 5-speed manu","ID":3378594,"VIN":"VSSZZZ6JZDR051504","Tag":"Hello, mouse", "TagsCountForUser" :2},{"AttributeCode":"","AttributeType":"Colour","AttributeValue":"Ice Silver","ID":3378595,"VIN":"VSSZZZ6JZDR051504","Tag":"", "TagsCountForUser" :0},{"AttributeCode":"","AttributeType":"Colour Code","AttributeValue":"P5P5","ID":3378596,"VIN":"VSSZZZ6JZDR051504","Tag":"Good Bye", "TagsCountForUser" :1},
 {"AttributeCode":"","AttributeType":"Trim Code","AttributeValue":"BT","ID":3378597,"VIN":"VSSZZZ6JZDR051504","Tag":"Mouse", "TagsCountForUser" :1},
{"AttributeCode":"","AttributeType":"Trim Description","AttributeValue":"Aloe","ID":3378598,"VIN":"VSSZZZ6JZDR051504","Tag":"Hello", "TagsCountForUser" :1}];

    var ctkGridData = new kendo.data.DataSource({
        data: JsonAttributes,
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { editable: false, nullable: true },
                    AttributeType: { editable: true },
                    AttributeValue: { type: "string", validation: { required: true} },
                    AttributeCode: { type: "string" },
                    VIN: { type: "string" }
                }
            }
           
        }
    });


    var gridVA = $("#grdVehicleAttributes").kendoGrid({
        dataSource: ctkGridData,
        dataBound: onDataBound,
        height: 750,
       ...