Tooltips

Tooltips don't give you a ton of real estate, but you can do some pretty interesting things by alerting the user about the title, or the type of the link before they click it.

Example 1: Display Type and Title

It's generally pretty hard for users to decide what to click on, as they never really know where you are going. Simple tooltips can make it easier on the user, hover over the links below to see.

One a brisk winter morning I went out to play with my dog. It was the dead of winter and an adventure began. I wished I was in a better place, but Northern Maine is the worst. So here ends our short story, I hope that you enjoyed everything about it, now hover over those links. Cheers.

$('.example-1 a').tooltip().embedly({
  // Overwrite the display function to set the data-original-title;
  display: function(elem, data){
    // Remove the http:// and everything after the '/';
    var provider_display = data.provider_url.replace(/https?\:\/\//, '').split('/')[0];

    // Set the data-original-title attribute that the bootstrap.js uses for the tool tip.
    $(elem).attr('data-original-title',
      data.type.toUpperCase() +': '+ data.title + ' ['+provider_display+']');
  }
});

Example 2: Safe Browse

One of the other things one can do is warn users of malicious links before they click on them. Using the 'preview' endpoint we can check if the link is safe before letting the user click on this.

The following is an example of a comment that we have all seen. The link is off stopbadware.org and will trigger an unsafe response from Embedly.

Hover over the link will trigger a tooltip and clicking on the link will bring up a modal. Try it, I promise you won't actually go to that site.

Hi all, I like your blog post, it was super interesting. I really hope that you find the time to check out my site.

Get More Twitter Followers

Muahahahaha.

$('.example-2 a').embedly({
  key: '',
  endpoint: 'preview', // Specify the "preview" endpoint.
  // Overwrite the display function to test for malicious links.
  display: function(elem, data){
    // See if the link is safe or not.
    if (data.safe === false){

      // Create a tooltip on the element.
      $(elem).tooltip({
        html: true,
        title: ''+data.safe_type.toUpperCase()+' Detected'
      });

      // When the user clicks on the click warn them before hand.
      $(elem).on('click', function(){
        // Open a Modal with the Correct Messaging.
        $('#malware-modal').modal();
        $('#malware-modal .modal-header h3').html(data.safe_type.toUpperCase()+' Detected');
        $('#malware-modal .modal-body p').html(data.safe_message);
        $('#malware-modal .proceed').attr('href', data.url);
        return false;
      })
    }
  }
});