Jquery получить сообщение красным цветом при наведении

Question

Я получаю сообщение об истекших предложениях как "Предложение истекло" при наведении курсора.Пока я получаю сообщение как оно есть.Из-за условия if, которое я использую, я не хочу сообщения в каждой строке таблицы.

Мне нужно получить сообщение в красном цвете.Как я могу это сделать?

jquery

<script>

var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var currentDate = d.getFullYear()  + '-' + (month<10 ? '0' : '') + month + '-' + (day<10 ? '0' : '') + day;

$('tr:not(:first)').hover(    
function() {  
    var enddate = $(this).find('.enddate').text();
    if(currentDate > enddate) {
        $(this).prop('title', "Offer Expired"); 
    }
} ); 
</script>

просмотр

                 <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                              <!-- <th scope="col"></th> -->
                            </tr>
                          </thead>
                          <tbody>
                            <?php foreach($offerList as $info){ ?>
                            <tr>
                                <td><a href="<?php echo base_url()."offer/publicview/?id=".urlencode($this->encrypt->encode($info->offid)); ?> " ><?php echo $info->title; ?></a></td>
                                <td><?php echo $info->startdate; ?></td>
                                <td class="enddate"><?php echo $info->enddate; ?></td>
                                <!-- <td><?php echo $info->enddate; ?></td> -->
                                <td><?php echo $info->discrip; ?></td>
                                <td>
                                    <a href="<?php echo base_url()."offer/edit/?id=".urlencode($this->encrypt->encode($info->offid)); ?>">Edit</a>                                              
                                </td>

                            </tr>
                            <?php } ?>
                          </tbody>
                        </table>

обновление

Answer 1

Да, вы можете динамически изменять свойство title и генерировать нужный заголовок.Пожалуйста, взгляните на следующую скрипку.В качестве примера я использую атрибут value.Вы можете вставить свою логику туда.

var date = 100;
$('a').each(function(){
if($(this).attr('value') > date)
$(this).prop('title', 'Order Expired');
});

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}
a[title]:hover:after {
  content: attr(title);
  color: white;
  background: red;
  position: absolute;
  top: -100%;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Hello world!" value = 90>
  Hover over me
</a>
<br>
<a  title="Hello world!" value = 110>
  Hover over me
</a>

Answer 2

Добавьте span или любой тег к вашему элементу title, где заголовок «offer Expired» приходит и создайте css для этого элемента.Если вы добавили значение столбца title в элемент span, сделайте css следующим образом: hover: after {color: red}