labelr - A lightweight, dependency free, label generator

• No dependencies!
• Supports: IE10+, Chrome 45+, Firefox 43+, Safari 9+
• 2kb minified and gzipped

Install

Node Package Manager

npm install labelr

Bower

bower install labelr

Download

You can download the scripts yourself and include with a script tag

<script type="text/javascript" src="lablr.js"></script>

or

require('flatpickr')

Syntax

labelr('selector', [options]);

Basics

A basic label

call labelr

<script>
labelr('.label');
</script>

Defaults to the title attribute for label text

<img title="hello world" src="hello.jpg" class="label"></img>

Select alt tags instead of title

<script>
labelr('.label', {attribute: 'alt'});
</script>

<img alt="this is alt" src="hello.jpg" class="label"></img>

Style label

<script>
labelr('.label', {style: {backgroundColor: 'indigo', color: 'white'}});
</script>

Most css styles are available

<img title="style changed" src="styles.svg" class="label"></img>

List of settings

An example settings object might look something like

{
    attribute: 'alt',
    style: {
        backgroundColor: 'indigo', 
        color: 'white'
        fontFamily: 'serif'
    }
}

Attributes

* alt
* title

Effects

* fade
* popup

Styles

* Any styles included as CSS javascript object