Как добавить разные размеры шрифта в подсказке?

Question

У меня есть функция, которая вычисляет оставшиеся дни между двумя датами, а затем отображает их как всплывающую подсказку. Как сделать количество дней (Difference_In_Days, Difference_In_DaysRev) больше, чем в другом тексте? Я попытался добавить <span style="font-size:25px;"> в переменную mess, но это дает ошибку. Я использую xsl для рендеринга страницы, но не думаю, что это имеет значение.

//TOOLTIP MESSAGE: REMAINING DAYS
  $('tr[startDateToCal]').each(function(index, el){
  //format "2019-10-31"
  var startdate = el.getAttribute('startDateToCal');
  var enddate = el.getAttribute('endDateToCal');
  var startDateRevToCal = el.getAttribute('startDateRevToCal');
  var endDateRevToCal = el.getAttribute('endDateRevToCal');


  var newstartdate =  startdate.substring(5,7) + "/" + startdate.substring(8,10) + "/" + startdate.substring(0,4);
  var newstartdaterev =  startDateRevToCal.substring(5,7) + "/" + startDateRevToCal.substring(8,10) + "/" + startDateRevToCal.substring(0,4);

  var newenddate = enddate.substring(5,7) + "/" + enddate.substring(8,10) + "/" + enddate.substring(0,4);
  var newenddaterev = endDateRevToCal.substring(5,7) + "/" + endDateRevToCal.substring(8,10) + "/" + endDateRevToCal.substring(0,4);



  //format "06/30/2019"
  var dateapp1 = new Date(newstartdate);
  var dateapp2 = new Date(newenddate);
  var daterev1 = new Date(newstartdaterev);
  var daterev2 = new Date(newenddaterev);

  // To calculate the time difference of two dates
  var Difference_In_Time = dateapp2.getTime() - dateapp1.getTime();
  var Difference_In_TimeRev = daterev2.getTime() - daterev1.getTime();

  // To calculate the no. of days between two dates
  var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
  Difference_In_Days = Math.round(Difference_In_Days);

  var Difference_In_DaysRev = Difference_In_TimeRev / (1000 * 3600 * 24);
  Difference_In_DaysRev = Math.round(Difference_In_DaysRev);


   var flg_nom = el.getAttribute('flg_nom');
   var flg_rev = el.getAttribute('flg_rev');

  var remainingDays = "Days Reminaining: 0";
  var remainingDaysRev = "Days Reminaining: 0";
  var mess;

  if(flg_nom=='Y' ){
    if(Difference_In_Days  >= 0){
      mess = "Submissions Open<br/><br/>" + Difference_In_Days + "<br/>Days Reminaining";
    }
  }

  if(flg_rev=='Y' && flg_nom=='N' ){
    if(Difference_In_DaysRev  >= 0){
      mess = "Reviews Open<br/><br/>" + Difference_In_DaysRev + "<br/>Days Reminaining";
    }
  }

  if(flg_nom=='N' && flg_rev=='N'){
    mess = el.getAttribute('currentYear') + " cycle setup.\n\nPlease contact RhythmQ for archiving and new cycle set up."  ;
  }

   $(this).attr('title',mess);

  });


  $('tr[data-toggle="tooltip"]').tooltip({
  html: "true"
  });

изображение всплывающей подсказки

Пожалуйста, сообщите.

Answer 1

Я использовал тег заголовка и переписал его в css.

mess = "Reviews Open<br/><br/><h6>" + Difference_In_DaysRev + "</h6><br/>Days Reminaining";
h6{ font-size: 30px; }

Answer 2

Вы не можете использовать двойные кавычки в обоих случаях:

mess = "Submissions Open<br/><br/><span style='font-size:25px;'>" + Difference_In_Days + "</span><br/>Days Reminaining";