Posts

Showing posts with the label tooltip

How to Add Bootstrap to an Angular CLI project

Image
Although the setup seems simple, I still get a lot of questions on how to setup an Angular project generated with Angular CLI with Bootstrap. So let’s see the step by step in the sections below. 1: Creating an Angular project with Angular CLI The first step is creating your Angular project using  Angular CLI . For this example we will use the following command: ng new angular-bootstrap-example 2: Installing Bootstrap from NPM Next, we need to install Bootstrap. Change the directory to the project we created ( cd angular-bootstrap-example ) and execute the following command: For Bootstrap 3: npm install bootstrap@3.3.7 For Bootstrap 4: npm install bootstrap 2.1: Alternative: Local Bootstrap CSS As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap  from the website  and created a folder  styles  (same level as  styles.css ):  Don’t place your local CS...

Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear

Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear we are doing this by pageX and pageY event of jquery. and in this example we are also excluding last  td  of the datatable, means we are not implementing tooltip to the last td of the each tr. css==> <style> #tooltip {   position: absolute;   z-index: 1001;   display: none;   border: 2px solid #ebebeb;   border-radius: 5px;   padding: 10px;   color:#fff;   background-color: #e0ae22; } #newcasemarktable tbody tr{cursor: pointer;} </style> HTML==> <div class="container">     <div class="col-sm-12">         <div id="tooltip"></div>           <table id="newcasemarktable" class="display" style="width:100%">   put your datatable here          </table> </div>   </...