jQuery Plugin To Add Highlighted Notes On The Page - Fokus

Fokus is a lightweight jQuery plugin used to focus html element by displaying a tooltip with an overlay on the web page. For example, you can add some highlighted notes on the page to tag images.

See also:

• Lightweight Image Tagging Plugin For jQuery - Taggd

Basic Usage:

1. Reference jQuery library and jQuery fokus plugin's javascript and CSS files somewhere.

<link rel="stylesheet" href="assets/css/fokus.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="assets/js/jquery.fokus.js"></script>

2. Create a container for a focused html element with data-fokus-target attribute pointing to the note element.

<div class="fokus-item" data-fokus-target="tip"></div>

3. Create the html for the note.

<div class="fokus-target" data-fokus-target="tip">
Your Content Goes Here
</div>

4. Available options.

body: $('body'),
navigatorWidth: $(window).width(),
navigatorHeight: $(window).height(),
overlay: 'fokus-overlay',
overlayTop: 'fokus-top',
overlayRight: 'fokus-right',
overlayBottom: 'fokus-bottom',
overlayExtra: 'fokus-extra',
overlayLeft: 'fokus-left',
overlayActive: 'fokus-item-on',
fokusTarget: 'fokus-target',
fokusTargetActive: 'fokus-target-active',
fokusBodyActive: 'fokus-body-active',
distanceTooltipToElement: 30,
tooltipWidth: 350

Change log:

2014-03-19

• fix demo. need fix scroll

---

This awesome jQuery plugin is developed by diogomoretti. For more Advanced Usages, please check the demo page or visit the official website.