Overview

The classes SK.UI.Tooltip and SK.UI.Tooltips allows you to create nice static tooltips when hovering an element. The text of the tooltip can be set as value from:

Tooltips appear by default below the element (vetical orientation) or on the right of the element (horizontal orientation). But the position depends on current coordinates of the element relative to the viewport.

 

Include Resource Files

Please note that the file dependencies may already exist in the environment and you may not need to include these.

  • /Shared/Scripts/fat_tooltips.js 
    <script type="text/javascript" src="/Shared/Scripts/fat_tooltips.js"></script>
  • /Shared/UIComponents/Internal/Tooltips/css/tooltip.css 
    <link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Tooltips/css/tooltip.css">

 

Options

//SK.UI.Tooltip and SK.UI.Tooltips signatures
new SK.UI.Tooltip( element, options );
new SK.UI.Tooltips( elements, options );
  • element can be DOM Element or String with ID of element
  • elements can be list of DOM Elements or String of DOM Elements class
  • options is an object (or array with objects of the same type in SK.UI.Tooltips constructor) with the following possible properties:


Name Description Type Default Value
orientation Alignment of the tooltip (can be 'vertical' or 'horizontal') String vertical
text If provided - the content of the tooltip (can be HTML); otherwise reads the title attribute of the element String -
class_name An additional value for the class attribute String -
show_delay Delay to show the tooltip in miliseconds Number 100
hide_delay Delay to hide the tooltip in miliseconds Number 300
fade_duration Duration of the animation for showing the tooltip Number 300
scroll_containers Array with ID of elements on whose scrolling, a tooltip will move with the element. Array (of Strings) []
events Show/Hide tooltip events Object { show : 'mouseenter', hide : 'mouseleave' }

 

Methods

Name Description Parameters Returns
enable Enable the tooltip - -
disable Disable the tooltip - -
destroy Destroying the tooltip - -

 

Events

Name Description Arguments
onShow Fires when a new tooltip is displayed -
onHide Fires when a tooltip was hided -

 

Examples

Initialize tooltips based on their class attribute. The text of tooltip will be the value of title attribute.

<!-- Resource files -->
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Tooltips/css/tooltip.css">
<script type="text/javascript" src="/Shared/Scripts/fat_tooltips.js"></script>

<!-- HTML -->
<div id="container">
  <a class="has-tooltip" title="Tooltip number 1">Button 1</a>
  <a class="has-tooltip" title="Tooltip number 2">Button 2</a>
  <a class="has-tooltip" title="Tooltip number 3">Button 3</a>
  <a class="has-tooltip" title="Tooltip number 4">Button 4</a>
</div>

<!-- JavaScript -->
<script type="text/javascript">
   new SK.UI.Tooltips( '.has-tooltip', {
      show_delay        : 150,
      scroll_containers : [ 'container' ]
   });
</script>

 

Initialize tooltips with SK.UI.Tooltip constructor.

<!-- Resource files -->
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Tooltips/css/tooltip.css">
<script type="text/javascript" src="/Shared/Scripts/fat_tooltips.js"></script>

<!-- HTML -->
<span id="my-tooltip">Lorem ipsum dolor...</span>

<!-- JavaScript -->
<script type="text/javascript">
   new SK.UI.Tooltip( _$('my-tooltip'), {
      orientation : 'horizontal',
      text        : 'Hello tooltips!',
      events      : {
         show : 'focus',
         hide : 'blur'
      }
   });
</script>