Categories

.contextOrientation()

Categories: CSS

.contextOrientation( context, orient, [ adjust ] )

Subclass: ep

Plugin: ep.fn.contextOrientation

Description: Set position to each of the set of matched elements related to an event or other element.

  • .contextOrientation( context, orient, [ adjust ] )

    version added: 6.11.0

    action   A selector, element or event as context to orient.

    orient   A vertical and/or horizontal position: middle, bottom, right, center or left.

    adjust   An array of numbers to adjust the positioning [0: adjust x, 1: adjust y].

The .contextOrientation() method adds/removes a busy layer to/from each of the set of matched elements.

  • Show a tooltip on click the image and position it right of the click position.

    HTML:
    <body>
      <img id="context" src="example.jpg" alt="example picture"/>
      <div id="tooltip">
        <h1>Example</h1>
        <span>Tooltip informations ...</span>
      </div>
    </body>
    
    CSS:
    #tooltip {
        position: absolute;
        width: 100px;
    }
    
    Code:
    $('#context')
        .on( 'click', function( event ){
            ep(this)
                .show()
                .contextOrientation( event, 'right' );
        });