Developing Tooltip With Tipped JS

Tipped is an entire javascript tooltip arrangement, utilize it to make tooltips that work wonderfully in each browser on any gadget.

DISPLAY ANYTHING

Tipped can show anything from basic bits of content to hand crafted tooltips. With work in Ajax bolster and an incredible Javascript API, Tipped covers practically every usecase with regards to tooltips.

BEAUTIFUL SKIN

Tooltips are made totally with CSS so they can without much of a stretch be redone to any plan. To kick you off Tipped accompanies various lovely skins that'll work great with your websites.

PERFECT POSITIONING

Tipped has an incredible yet exquisite situating framework. It will consequently keep tooltips inside the viewport and keeping in mind that doing as such ensure that they never appear to be detached from their elements. Something no other tooltip script does very this well.

INSTALLATION

Include the latest 3.x release of jQuery in your header, the jQuery CDN can be used for this.

Download Tipped and transfer the documents from the bundle to your server. Include tipped.js and tipped.css below jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped/tipped.css"/>

CREATING TOOLTIP

Tipped.create can be utilized to create at least one tooltips in the meantime. It acknowledges a CSS Selector or HTML Element as the main parameter:

<span class="simple-tooltip" title="First tooltip">I have a tooltip</span>
<span class="simple-tooltip" title="Second tooltip">I also have a tooltip</span>


<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.simple-tooltip');
  });
</script>

AJAX

The ajax alternative can be utilized to make Ajax requests, it acknowledges indistinguishable settings from jQuery.ajax(). A straightforward Ajax ask for that refreshes a tooltip would resemble this:

<span id='ajax-callback'>Ajax Callback</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#ajax-callback', {
      ajax: {
        url: 'hello-world.php',
        success: function(data, textStatus, jqXHR) {
          return jqXHR.responseText + ', this is a modified response';
        }
      }
    });
  });
</script>

The ajax choice can be utilized to make Ajax requests, it acknowledges indistinguishable settings from jQuery.ajax(). A straightforward Ajax ask for that refreshes a tooltip would resemble this:

JSON - Oodles

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#json-vimeo', {
      ajax: {
        url: 'http://oodles.com/api/oembed.json?url=http://oodles.com/6428069&maxwidth=280&maxheight=280',
        success: function(data, textStatus, jqXHR) {
          return {
            title: data.title,
            content: data.html
          };
        }
      },
      close: true,
      hideOn: false,
      skin: 'light',
      radius: false,
      position: 'topleft'
    });
  });
</script>

You have now learned about Tipped JS. For any queries or suggestion do comment us in the comment section.

Reference 

If you'd like to learn more about them, please visit the following links: - Tipped JS Documentation