How To Add Arrow Or Pointer With JQuery UI Tooltip?

For using JQuery UI tooltip, you need to include JQuery UI library in your page.You can download latest version of JQuery library from here:
http://jqueryui.com/changelog/1.9.0/

Today, we will discuss  about how to  add  tooltip with arrow to fields (like textfield, link etc). Using tooltip to field is a very nice way  for providing hint or info whatever you want. You can add tooltip on various events like mouseover, click etc.

Here is the HTML code:

<h4>Click on radio button to change arrow locationh4>

<input type="radio" name="tooltip" class="right" checked="true" /> Right
<input type="radio"  class="left" name="tooltip" />  Left
<input type="radio"  class="top"  name="tooltip" />  Top
<input type="radio"  class="bottom" name="tooltip" /> Bottom

<div>
<input type="text" title="This is a tooltip" style="margin: 70px 0 0 150px;" />
</div>

CSS:

.ui-tooltip {
    background: #FFFF;
    color: black;
    border: 2px solid #a4c8f5;
    padding: 0;
    opacity: 1;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 0 10px 10px;
}

JQuery Code:

$(function() {
    var tooltips = $( "[title]" ).tooltip({
        position: {
           my: "left center",
           at: "right+10 center"
      }
    });
 });

$('input[type="radio"]').on('change', function() {
    var className = $(this).attr("class");
    var position;
    switch (className) {
        case 'top':
          position = { my: 'center bottom', at: 'center top-10' };
                    break;
       case 'bottom':
          position = { my: 'center top', at: 'center bottom+10' };
                    break;
       case 'left': 
          position = { my: 'right center', at: 'left-10 center' };
                    break;
       case 'right':
          position = { my: 'left center', at: 'right+10 center' };
                    break;
    }
    position.collision = 'none';
$( "[title]" ).tooltip('option', 'tooltipClass', className);
$( "[title]" ).tooltip('option', 'position', position);
});
$('input[class="right"]').trigger('change');

Here tooltip applying on the basis of title attribute of the field ,so whatever you put in title attribute  that get display on events like mouseover, click etc .

Check running examples here:
1.  http://jsfiddle.net/jeetu_verma11/S2uUC/1/

2. http://jsfiddle.net/jeetu_verma11/rpec9/5/

3. http://jsfiddle.net/jeetu_verma11/rpec9/4/

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.