How to set tooltip in bootstrap on mouse over.

Link bootstrap css and js file.

Then link below script.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Now put below html for tooltip.

<span  data-toggle="tooltip" data-placement="right" title="what have to show in tooltip">hover tooltip show </span>

Write below script for tooltip.

$(function () {

        $('[data-toggle="tooltip"]').tooltip({

            html: true,

            trigger: 'manual'

        }).on("mouseenter", function () {

            var _this = this;

            $(_this).tooltip("show");

            $(_this).siblings(".tooltip").on("mouseleave", function () {

                $(_this).tooltip('hide');

            });

        }).on("mouseleave", function () {

            var _this = this;

            setTimeout(function () {

                if (!$(".tooltip:hover").length) {

                    $(_this).tooltip("hide")

                }

            }, 100);

        });

        $('[data-toggle="tooltip"]').hover(function () {

           var pos = positionTooltip(this);

            $('.tooltip-inner').css('color', '#12677C');

            $('.tooltip-inner').css('TEXT-DECORATION', 'none');

            $('.tooltip-inner').css('background-color', '#ffffff');

            $('.tooltip-inner').css('text-align', 'left');

            $('.tooltip-inner').css('font-family', 'GothamBook, Century Gothic, Calibri, sans-serif');

            $('.tooltip-inner').css('font-size', '13');

            $('.tooltip-inner').css('min-width', '200px');

            $('.tooltip-inner').css('max-width', '500px');

            $('.tooltip-inner').css('max-height', '200px');

            $('.tooltip-inner').css('overflow', 'auto');

            $('.tooltip').css('top', pos+'px');

        });

Below function is for tooltip position adjustment.

functionpositionTooltip(currentElement) {

        varposition = $(currentElement).position();

        if(position.top < 60) {

            return 0;

        }

    }

Some jqurry Data table properties. How to set properties for data table

Jquery Datatable default properties:

<script type="text/javascript" language="javascript" class="init">

    $(document).ready(function() {$('#TABLE_ID').dataTable({'iDisplayLength': 2,//Set Row Per Page

    "bFilter": false,//Remove Search

    "bPaginate" : false,//Remove Pagination

    "bInfo": false,//Remove Page Info

    "bLengthChange":false,//Show per Page Dropdown Remove

    "columnDefs": [ { "targets": 0, "orderable": false } ],//Remove Colum Orderable(Here Col 0 Remove)

    "aoColumns": [{ "asSorting": [] },{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc" ] },{ "asSorting": [ "desc" ] },null],//Set Colum Order By ASC Or DSC

    "sPaginationType": "full_numbers"//Full Pagination

    });

    });

How get Print functionality using jquery.

Please take the div id of which you want to take print  and

pass the div id as a input parameter to the function. 

function printDiv(divID) {

    //Get the HTML of div   

    var divElements = document.getElementById(divID).innerHTML;

    //opening a new window and writing the styles and div content in that before printing

    var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');

    popupWin.document.open();

    popupWin.document.writeln("<html><head>");

    popupWin.document.writeln('<link href="../Content/corecss/bootstrap.min.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/bootstrap-reset.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/tabdrop.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/jquery.gritter.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/style1.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/style-responsive.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/navbar-fixed-top.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln('<link href="../Content/corecss/table-responsive.css" rel="stylesheet" type="text/css">');

    popupWin.document.writeln("</head><body>");

    popupWin.document.writeln("<table align=\"left\"><tr><td align=\"left\" class=\"panel-heading\">");

    popupWin.document.writeln("<br/>");

    popupWin.document.writeln(divElements + "</body></html>");

    popupWin.print();

    popupWin.close();

}