Class Index | File Index

Classes


Class Biojs.Tooltip


Version 1.0.0.

Extends Biojs.

Defined in: Biojs.Tooltip.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Biojs.Tooltip(options, targetSelector, cbRender, arrowType, position, delay)
Tooltip for general purpose.
Field Summary
Field Attributes Field Name and Description
<inner>  
Array containing the supported event names
<inner>  
opt
Default values for the options
Method Summary
Method Attributes Method Name and Description
 
constructor(options)
 
getArrowType(arrowType)
Returns the actual arrow type.
 
Returns the actual id attribute value.
 
setArrowType(arrowType)
Changes the Tooltip direction.
 
Sets the id attribute value.
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Event Summary
Event Attributes Event Name and Description
 
onShowUp(actionPerformed)
Class Detail
Biojs.Tooltip(options, targetSelector, cbRender, arrowType, position, delay)
Tooltip for general purpose.
Author: John Gomez.
   // These examples use the component's example div 'YourOwnDivId' to draw the links only.
   jQuery('#YourOwnDivId')
      .append('Pass the mouse over here.')
      .css({ 
         'display': 'table-cell',
         'vertical-align': 'middle',
         'text-align': 'center',
         'width': '730px',
         'height': '400px'
      });
   
   // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example'
   var simpleTip = new Biojs.Tooltip({
      targetSelector: "a.example"
   });
   
   //
   // Another example using rendering function instead of 'title' attribute
   //
   jQuery('#YourOwnDivId')
      .append('



This example change the tooltip direction
for each mouse entry.
'); // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example' var tipRendered = new Biojs.Tooltip({ targetSelector: "a.example.render", cbRender: function( element ) { return "Tooltip type Biojs.Tooltip.ARROW_" + this.getArrowType().toUpperCase() + " using rendering function to build up content dynamically" } }); // Changes the tooltip's direction var counter = 0; var arrowTypes = [ Biojs.Tooltip.ARROW_LEFT_TOP, Biojs.Tooltip.ARROW_LEFT_MIDDLE, Biojs.Tooltip.ARROW_LEFT_BOTTOM, Biojs.Tooltip.ARROW_TOP_LEFT, Biojs.Tooltip.ARROW_TOP_MIDDLE, Biojs.Tooltip.ARROW_TOP_RIGHT, Biojs.Tooltip.ARROW_RIGHT_TOP, Biojs.Tooltip.ARROW_RIGHT_MIDDLE, Biojs.Tooltip.ARROW_RIGHT_BOTTOM, Biojs.Tooltip.ARROW_BOTTOM_LEFT, Biojs.Tooltip.ARROW_BOTTOM_MIDDLE, Biojs.Tooltip.ARROW_BOTTOM_RIGHT ]; // Changes the Tooltip arrow type dynamically jQuery('#YourOwnDivId a.example.render').mouseover( function() { var arrowType = arrowTypes[ counter++ % 12 ]; tipRendered.setArrowType( arrowType ); }); // // Another example using rich content // jQuery('#YourOwnDivId') .append('



Rich content'); var richContent = '
'+ '

Santiago de Cali

' + ''+ '

'+ 'Simply referred to as Cali, is a city located in western Colombia '+ 'It is the capital of the Valle del Cauca Department. With a population of 2.5 million, '+ 'Cali is the third largest city in the country, after Bogota and Medellin. The city '+ 'was founded on 25 July 1536.

'; var tipRich = new Biojs.Tooltip({ targetSelector: "a.example.rich", cbRender: function( element ) { return richContent; }, arrowType: Biojs.Tooltip.ARROW_BOTTOM_MIDDLE }); // // Last example using mouse position instead of element's // jQuery('#YourOwnDivId') .append('



Tooltip changes with mouse positioning.'); var tipPosition = new Biojs.Tooltip({ targetSelector: "a.example.position", position: Biojs.Tooltip.MOUSE_POSITION });
Parameters:
{Object} options
An object with the options for Article component.
{string} targetSelector
A selector string to match the elements in the document. For more information on it, see jQuery selectors.
      // Select all the links 
      targetSelector: "a"
      
      // Select the element with the id 'target'
      targetSelector: "#target"
      
      // Select all elements whose belong to the class 'here'
      targetSelector: ".here"
      
      // Select all list elements whose belong to the class 'here'
      targetSelector: "li.here"
   
{function} cbRender Optional
By default, BiojsTooltip uses the 'title' attribute to render the content. Set this option to customize the content rendering instead of using the default value.
     cbRender: function( element ) {
        return "This is my personalized content for element " + element.tagName;
     }
   
{static} arrowType Optional, Default: Biojs.Tooltip.ARROW_LEFT_TOP
Automatic positioning of the tooltip depends on the arrow direction. Possible arrow types are:
  • Biojs.Tooltip.ARROW_LEFT_TOP
  • Biojs.Tooltip.ARROW_LEFT_MIDDLE
  • Biojs.Tooltip.ARROW_LEFT_BOTTOM
  • Biojs.Tooltip.ARROW_TOP_LEFT
  • Biojs.Tooltip.ARROW_TOP_MIDDLE
  • Biojs.Tooltip.ARROW_TOP_RIGHT
  • Biojs.Tooltip.ARROW_RIGHT_TOP
  • Biojs.Tooltip.ARROW_RIGHT_MIDDLE
  • Biojs.Tooltip.ARROW_RIGHT_BOTTOM
  • Biojs.Tooltip.ARROW_BOTTOM_LEFT
  • Biojs.Tooltip.ARROW_BOTTOM_MIDDLE
  • Biojs.Tooltip.ARROW_BOTTOM_RIGHT
    {static} position Optional, Default: Biojs.Tooltip.ELEMENT_POSITION
    Position is calculated through either mouse position or element position. Allowed values are: Biojs.Tooltip.ELEMENT_POSITION or Biojs.Tooltip.MOUSE_POSITION
    {int} delay Optional, Default: 200
    Time interval in milliseconds starting on mouse exiting from element/Tooltip until the Tooltip hides itself.
    Requires:
    Tooltip CSS
    jQuery Core 1.6.4
    Field Detail
    <inner> eventTypes
    Array containing the supported event names

    <inner> opt
    Default values for the options
    Method Detail
    constructor(options)
    Parameters:
    options

    {static} getArrowType(arrowType)
    Returns the actual arrow type.
    alert ( "First example is using " + simpleTip.getArrowType() + " arrow." );
    Parameters:
    arrowType
    Returns:
    {static} Static Biojs.Tooltip.ARROW_[TYPE] value.

    {string} getIdentifier()
    Returns the actual id attribute value.
    alert ( "Identifier of the second example is " + tipRendered.getIdentifier() + "." );
    Returns:
    {string} DOM element identifier of this component.

    setArrowType(arrowType)
    Changes the Tooltip direction. The point of reference is the arrow's type. Choose one of the following available types:
    simpleTip.setArrowType(Biojs.Tooltip.ARROW_BOTTOM_RIGHT);
    Parameters:
    {static} arrowType
    Static Biojs.Tooltip.ARROW_[TYPE] value.

    setIdentifier(DOM)
    Sets the id attribute value.
    tipRendered.setIdentifier("MyIdentifier");
    Parameters:
    {string} DOM
    element identifier for this component.
    Event Detail
    onShowUp(actionPerformed)
    simpleTip.onShowUp(
       function( e ) {
          alert("Mouse has passed over the first example.");
       }
    );
    Parameters:
    {function} actionPerformed
    A function which receives an Biojs.Event object as argument.
    Event object data:
    {Object} source
    The component which did triggered the event.
    {string} type
    The name of the event.
    {string} target
    Target element.

    Documentation generated by JsDoc Toolkit 2.3.2 on Thu Apr 17 2014 17:42:43 GMT+0100 (BST)