Jquery get message in red color when hover

Question

I am getting a message for expired offers as "Offer Expired" when hovering. For now I get the message as just it is. Due to the if condition Im using I do not want the message in every table row.

I need to get the message in red color. How can I do it?

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>

view

                 <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>

update

you cant change the color of a title attribute as that is decided by the browser. there are plugins such as bootstraps popover or similar that will do the job or even css driven methods that produce similar results to the title attr. — Alex, Sep 21 '18 at 05:21
Possible duplicate of [How to change the style of the title attribute inside an anchor tag?](https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag) — Alex, Sep 21 '18 at 05:23
@samuellawrentz is it possible to use it with the if condition? — shavindip, Sep 21 '18 at 05:28

samuellawrentz · Accepted Answer · 2018-09-21T08:54:17.697

1

Yes, you can change the title property dynamically and generate the desired title. Please have a look at the following fiddle. As an example, I'm using the value attribute. You can insert your logic there.

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>

edited Sep 21 '18 at 08:54

answered Sep 21 '18 at 06:21

samuellawrentz

1,662
11
23

Hi thanks a lot for this. But the messages are shown in two ways when hover. Is there any way to remove one? – shavindip Sep 21 '18 at 07:19
I have removed `.hover` from Jquery and edited the answer. Is that you wanted? – samuellawrentz Sep 21 '18 at 08:55
1

I have updated my above image. I think I have to use bootstrap popover or other method. – shavindip Sep 21 '18 at 09:06

score 0 · Answer 2 · answered Sep 21 '18 at 06:03

0

Add span or any tag to your title element where the title "offer Expired" is comming and make css on that element. If you have added your title column value in span element then make css like this span:hover:after { color:red }

answered Sep 21 '18 at 06:03

Hemant Naringhani

17
1
5

Jquery get message in red color when hover

2 Answers2