$('#red').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false,
  hoverIntent: false,
  sticky: true,
  mouseOutClose: true,
  closePosition: 'title',
  closeText: '<img src="cross.png" alt="close" />'
});
$('#golden').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false,
  hoverIntent: false,
  sticky: true,
  mouseOutClose: true,
  closePosition: 'title',
  closeText: '<img src="cross.png" alt="close" />'
});
$('#blue').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false,
  hoverIntent: false,
  sticky: true,
  mouseOutClose: true,
  closePosition: 'title',
  closeText: '<img src="cross.png" alt="close" />'
});

 $('#purple').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false,
  hoverIntent: false,
  sticky: true,
  mouseOutClose: true,
  closePosition: 'title',
  closeText: '<img src="cross.png" alt="close" />'
});

 $(document).ready(function() {
  $('#cheryl-hiltibran-buttons').cluetip();
  
  $('#red').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
    $('#golden').cluetip({
    splitTitle: '|',              
    showTitle: false 
  });
   $('#blue').cluetip({
    splitTitle: '|',                    
    showTitle: false 
  });
  $('#purple').cluetip({
    splitTitle: '|',                   
    showTitle: false 
  });
});