<commit_before># CF Popover

A lightweight framework for positioning popovers against triggers links. It's a pretty thin wrapper for jQuery UI Position, which does most of the heavy lifting.

## Requirements

- jQuery 1.6+
- jQuery UI 1.8+

It would probably work with earlier versions, but we haven't tested that.

## What it Does

- Visually positions the popover against the trigger element, regardless of where they are in the source order.
- Toggles the Popover with a fade effect when you click the trigger
- When clicking outside of the popover area, hides the popover.
- Repositions the popover after a window resize to make sure it stays pinned to the right place.
- Adds `.before` and `.after` empty elements to the popover. You can use these to create comic-bubble pointers using background images, or that type of thing.

## Usage

Include the script and it's requirements.

Popover markup consist of two parts:

- The popover element which must have an ID
- A trigger link, with an anchor to the ID of the popover element.

Sample markup:

	<a class="trigger" href="#popover1">Open Popover</a>
	
	<div id="popover1">Popover FTW!</div>

The popover element can live anywhere on the page. The script will automatically position the popover against the trigger.<commit_msg>Introductory example.<commit_after># CF Popover

A lightweight framework for positioning popovers against triggers links. It's a pretty thin wrapper for jQuery UI Position, which does most of the heavy lifting.

JavaScript

	$('.trigger').popover();

HTML:

	<a class="trigger" href="#popover1">Open Popover</a>
	<div id="popover1">Popover FTW!</div>

CSS:

	#popover1 {
		position:absolute;
	}

## Requirements

- jQuery 1.6+
- jQuery UI 1.8+

It would probably work with earlier versions, but we haven't tested that.

## What it Does

- Visually positions the popover against the trigger element, regardless of where they are in the source order.
- Toggles the Popover with a fade effect when you click the trigger
- When clicking outside of the popover area, hides the popover.
- Repositions the popover after a window resize to make sure it stays pinned to the right place.
- Adds `.before` and `.after` empty elements to the popover. You can use these to create comic-bubble pointers using background images, or that type of thing.

## How to Use It

Include the script and it's requirements.

Popover markup consist of two parts:

- The popover element which must have an ID
- A trigger link, with an anchor to the ID of the popover element.

Sample markup:

	<a class="trigger" href="#popover1">Open Popover</a>
	<div id="popover1">Popover FTW!</div>

The popover element can live anywhere on the page. The script will automatically position the popover against the trigger.
{'fraction_non_alphanumeric': 0.06765557163531115, 'fraction_numerical': 0.005426917510853835, 'mean_word_length': 4.197368421052632, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '57067', 'n_tokens_mistral': 785, 'n_tokens_neox': 741, 'n_words': 400}