This is my js as an example
function timeConvert(n) {
//var num = n*60;
var hours = n;//(num / 60);
var rhours = Math.floor(hours);
var minutes = (hours - rhours) * 60;
var rminutes = Math.round(minutes);
return rhours + " hour(s) and " + rminutes + " minute(s).";
}
function locationCat(arg){
if(arg == 'site'){
return 'On Site';
}else if(arg == 'thirdParty'){
return 'Other Site';
} else if(arg == 'm5'){
return 'Inplant M5';
} else if(arg == 'a30'){
return 'Inplant A30';
}else if(arg == 'm25'){
return 'Inplant M25';
} else{
return 'Online';
}
}
function depotArea(arg){
if(arg ==1){
return 'A30';
}else if(arg == 3){
return 'M25';
}else if(arg == 4){
return 'M5';
}else{
return 'North/other';
}
}
function custPrefs(arg){
if(arg === ""){
return 'None';
}else{
return arg;
}
}
if($parameters.type == 3){
tooltip = '<div class="tooltiptopicevent" style="width:auto;border: 5px solid black;height:auto;background:white;color:black;position:absolute;z-index:10001;padding:10px 10px 10px 10px ; line-height: 105%;">'+$parameters.contractor+'<br>'+$parameters.title+'<br>'+$parameters.address+'<br><div id="contactTable"></div><br><u>Actions: </u>'+$parameters.actions+'<br><u>Scheduled dates:</u><br>'+$parameters.scheduledTime+'<br><u>Proposed Dates: </u><br>'+$parameters.AllowedDates+'</div>';
}else{
tooltip = '<div class="tooltiptopicevent" style="width:auto;border:2px solid black; border-radius:20px;height:auto;background:white;color:black;position:absolute;z-index:10001;padding:10px 10px 10px 10px ; "><h3 class="toolTitle">'+$parameters.title+'</h3><br><h4 class="toolAddress" style="min-width:300px; width:100%; display:block; background-color:grey; padding:5px; border-radius:5px;">'+$parameters.address+'</h4><br><p class="'+$parameters.locCat+'" style="width:20%; display:inline-block; padding:5px;border:1px solid black; border-radius:5px;margin-top:3px;text-align:center;">'+locationCat($parameters.locCat)+'</p><p class="'+$parameters.eventCat+'" style="width:20%; display:inline-block; padding:5px;border:1px solid black; border-radius:5px;margin-top:3px; margin-left:5px;text-align:center;">'+$parameters.eventCat+'</p><p style="width:40%; display:inline-block; padding:5px;border:1px solid black; border-radius:5px;margin-top:3px; margin-left:5px;text-align:center;">Depot area: '+depotArea($parameters.depot)+'</p><br><b><u>Duration:</u></b>'+timeConvert($parameters.durationonsite)+'<br><b><u>Scheduled dates:</u></b> '+$parameters.scheduledTime+'<br><b><u>Proposed Dates:</u></b> '+$parameters.AllowedDates+'<div><u><b>Customer preferences: </b></u><br>'+custPrefs($parameters.customerPrefs)+'</div><br><div style="display:inline-block; width:50%;"><b><u>Notes:</u></b><div> '+$parameters.actions+'</div><b><u>Contacts</u></b><br><div id="contactTable" style="margin-bottom: 0px;width:50%;"></div ></div><div style="display:inline-block; width:50%;" ><b><u>Competencies:</u></b><div id="skillsTable"></div></div><br><br><b><div style="display:inline-block; width:50%;"><u>Actions: </u></b><br><div id="actionsTable" ></div></div><div style="display:inline-block; width:50%;"><b><u>Equipment:</u></b> <div id="equipTable"></div></div></div>';
}
$('body').append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$(this).css('min-width', '850px');
$('.tooltiptopicevent').fadeIn('500');
$('.tooltiptopicevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
var x = e.pageY;
if(x<625){
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
}else{
$('.tooltiptopicevent').css('top', e.pageY - 310);
$('.tooltiptopicevent').css('left', e.pageX + 20);
}
});
if($parameters.KC !== ""){
var kcTable = JSON.parse($parameters.KC);
for (x=0 ;x< kcTable.length;x++) {
if(kcTable[x].name !=="" ) {
var name = kcTable[x].name;
var kc = kcTable[x].keyContact;
var pp1 = "";
if(!kcTable[x].phone_personal_1){
pp1 = ""}else{pp1 = kcTable[x].phone_personal_1}
var pp2 = "";
if(!kcTable[x].phone_personal_2){
pp2 = ""}else{pp2 = kcTable[x].phone_personal_2}
var pw1 = "" ;
if(!kcTable[x].phone_work_1){
pw1 = ""}else{pw1 = kcTable[x].phone_work_1}
var pw2 = "";
if(!kcTable[x].phone_work_2){
pw2 = ""}else{pw2 = kcTable[x].phone_work_2}
var table = document.createElement('table');
table.innerHTML = "<table><tr><td>" +name + "</td><td>" + kc + "</td><td>" +pp1.replace(/ /g,'') + "</td><td>" + pp2.replace(/ /g,'') + "</td><td>" + pw1.replace(/ /g,'') + "</td><td>" + pw2.replace(/ /g,'') + "</td></tr></table>";
document.getElementById('contactTable').appendChild(table);
}
}
}
if($parameters.equipment !== ""){
var equipTable = JSON.parse($parameters.equipment);
for (x=0 ;x< equipTable.length;x++) {
var quant = equipTable[x].Quantity;
var desc = equipTable[x].description;
var eTable = document.createElement('table');
eTable.innerHTML = "<table><tr><td>" +quant + "</td><td>" + desc + "</td></tr></table>";
document.getElementById('equipTable').appendChild(eTable);
}
}
if($parameters.RRActionsList !== ""){
var actTable = JSON.parse($parameters.RRActionsList);
for (x=0 ;x< actTable.length;x++) {
var adesc = actTable[x];
var aTable = document.createElement('table');
aTable.innerHTML = "<table><tr><td>" +adesc + "</td></tr></table>";
document.getElementById('actionsTable').appendChild(aTable);
}
}
if($parameters.skills !== ""){
var skTable = JSON.parse($parameters.skills);
for (x=0 ;x< skTable.length;x++) {
var sdesc = skTable[x].description;
var skillTable = document.createElement('table');
skillTable.innerHTML = "<table><tr><td>" +sdesc + "</td></tr></table>";
document.getElementById('skillsTable').appendChild(skillTable);
}
}