Breadcrumbs

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">




          <div class="ybx-notification-container ui-notification-alert-container">
            <div id="ybx-alertnano-notification-8174343" class="list-group-item ybx-notification-alert-nano list-group-item-info" data-objectalertinfo="" data-sdiv="8174343">
              <div class="ybx-showprofile-notification pull-left">
                <button class="ybx-yakabox-markasread btn btn-link btn-sm " data-toggle="tooltip" data-disabled="false" data-placement="top" title="Mark as Read" data-delay='{"show":"300", "hide":"25"}'>
                  <span class="fa fa-circle"></span>
                  <span class="sr-only">Mark as Read</span>
                </button>

                <img src="https://yakabod.yakabox.com/images/userupload/resourcetype/icon_Release.png?v=20191010" border="0" alt="">&nbsp;
              </div>
              <a href="/common/getObject.html?urn=vne:www.yakabod.com:user:280&amp;hash=7c9d7103d8697a3636ea718568f8275711f8e331d2280313e8cf5fdbcfb5a87f" data-atf-element="atf-link-avalert-user-John+Thorhauer" data-linkurn="vne:www.yakabod.com:user:280" data-linkhash="7c9d7103d8697a3636ea718568f8275711f8e331d2280313e8cf5fdbcfb5a87f" class="urn ybx-reason-urn">John Thorhauer</a> 
 messaged you  
<a href="/common/getObject.html?urn=vne:www.yakabod.com:resource:40720&amp;hash=1d5be81b719f7fc4d1bf7251702c10a25255264418d83f7fa9ca893ddb2b17fa" data-atf-element="atf-link-avalert-resource-Yakabox+5.33" data-linkurn="vne:www.yakabod.com:resource:40720"...

SCSS

body {padding:50px;}


.btn[data-disabled="true"] {
  color:#fff;
}


 .ui-notification-alert-container 
 .ybx-showprofile-notification .btn-link {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10px;
    height: 49px;
    border-radius: 0;
    width: 31px;
 }
 
 .list-group-item-info {
    color: black;
    background-color: #fff;
    padding-left: 32px;
}

 .list-group-item-info:hover {
   background:aliceblue;
 }

 .list-group-item-info:hover .btn[data-disabled="true"] {
   color:gray
 }
 .list-group-item-info:hover .btn[data-disabled="true"]:hover {
  color:#333;
}

JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

$(".ybx-yakabox-markasread").each(function(index) {

  $(this).on('click', function(e) {



    if ( $(this).hasClass("disabled") === true ) {
      
      console.log('t');
      
      var newValue = 'Mark as Unread';
      
      $(this).tooltip('hide')
        .attr('data-disabled', 'true')
        .attr('data-original-title', newValue)
        .tooltip('show');
      
    } else if ( $(this).hasClass("disabled") === false ) {
      
      console.log('f');
     
      var newValue = 'Mark as Read';

      $(this).tooltip('hide')
        .attr('data-disabled', 'false')
        .attr('data-original-title', newValue)
        .tooltip('show');
     
    }

  });

});





/*
<button class="ybx-yakabox-markasread btn btn-link btn-sm" 
        data-toggle="tooltip" data-disabled="true"  
        data-placement="top"  title="Mark as Unread">
  <span class="fa fa-circle"></span>
  <span class="sr-only">Mark as Unread</span>
</button>
*/