bloom.js

JS Plugins JavaScript
On branch ???
Latest: ???
Running: ???
??? commits behind

Tooltips that bloom from a point.

Installation

npm install bloom.js

or

git clone https://github.com/0x0049/bloom.js

Usage

Bloom can be activated on any element.

<div id="bloom-demo">
    <div class="row">
        <button type="button" class="bloom-js" data-x="left" data-y="top" data-arrow-x="right" data-arrow-y="center">top left</button>
        <button type="button" class="bloom-js" data-x="center" data-y="top" data-arrow-x="center" data-arrow-y="bottom">top center</button>
        <button type="button" class="bloom-js" data-x="right" data-y="top" data-arrow-x="left" data-arrow-y="center">top right</button>
    </div>

    <div class="row">
        <button type="button" class="bloom-js" data-x="left" data-y="center" data-arrow-x="right" data-arrow-y="center">center left</button>
        <button type="button" class="bloom-js" data-x="center" data-y="center" data-use-arrow="false" data-arrow-x="center" data-arrow-y="center">center center</button>
        <button type="button" class="bloom-js" data-x="right" data-y="center" data-arrow-x="left" data-arrow-y="center">center right</button>
    </div>

    <div class="row">
        <button type="button" class="bloom-js" data-x="left" data-y="bottom" data-arrow-x="right" data-arrow-y="center">bottom left</button>
        <button type="button" class="bloom-js" data-x="center" data-y="bottom" data-arrow-x="center" data-arrow-y="top">bottom center</button>
        <button type="button" class="bloom-js" data-x="right" data-y="bottom" data-arrow-x="left" data-arrow-y="center">bottom right</button>
    </div>
</div>
$(".bloom-js").bloom({
    content: 'click on these squares too<button type="button" class="top left"></button type="button"><button type="button" class="top center"></button type="button"><button type="button" class="top right"></button type="button"><button type="button" class="middle left"></button type="button"><button type="button" class="middle center"></button><button type="button" class="middle right"></button type="button"><button type="button" class="bottom left"></button type="button"><button type="button" class="bottom center"></button type="button"><button type="button" class="bottom right"></button type="button">',
    opened: function ($element, $tooltip) {
        $tooltip.find("button").click(function () {
            var $this = $(this);
            var classes = $this.attr("class").split(" "); // Very particular to how it's set up. Requires two classes with y on the left and x on the right.
            $element.bloom({
                arrowY: classes[0] === "middle" ? "center" : classes[0],
                arrowX: classes[1]
            });
        });
    }
});
#bloom-demo .row {
    text-align: center;
}

#bloom-demo .bloom-js {
    background-color: #81a2be;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    height: 50px;
    margin: 5px 2px;
    outline: 0;
    transition: all .3s ease-in-out;
    width: 50px;
}

.bloom {
    font-size: 10px;
    z-index: 999;
}

.bloom button {
    background-color: #222;
    border: none;
    cursor: pointer;
    height: 20px;
    opacity: 0.1;
    outline: none;
    position: absolute;
    transition: opacity 100ms ease-in-out;
    width: 20px;
}

.bloom:hover button {
    opacity: 0.5;
}

.bloom .top {
    top: -15px;
}

.bloom .middle {
    margin-top: -10px;
    top: 50%;
}

.bloom .bottom {
    bottom: -15px;
}

.bloom .left {
    left: -15px;
}

.bloom .center {
    left: 50%;
    margin-left: -10px;
}

.bloom .right {
    right: -15px;
}

.bloom button:hover {
    opacity: 0.8;
}

Options

Pass in options like this:

$(".bloom").bloom({{
  optionName: optionValue
});

Or put them on the element as data attributes:

data-optionName="optionValue"
OptionTypeDefaultDescription
xStringcenterHorizontal position of the tooltip in relation to the element. Valid values are center, top, bottom, right, and left.
yStringbottomVertical position of the tooltip in relation to the element. Valid values are center, top, bottom, right, and left.
activeClassStringactiveThis class will be added to the clicked element.
toggleClassBooleantrueWhether to toggle the active class.
contentStringNo content found.The content to place in the tooltip.
useSkinStringdefaultWhich skin to use (not implemented yet).
speedInNumber300Speed to animate tooltip in milliseconds.
speedOutNumber200Speed to animate tooltip out in milliseconds.
animateBooleantrueWhether to animate the tooltip or just show/hide it.
useArrowBooleantrueWhether to show arrows on the tooltip (arrows aren't implemented yet).
arrowXStringcenterHorizontal position of the arrow in relation to the tooltip. Valid values are left, center, right.
arrowYStringtopVertical position of the arrow in relation to the tooltip. Valid values are top, center, and bottom.
clickOutsideClosesBooleanfalseWhether clicking outside of the tooltip should close it.
selectorStringnullUse an element on the page (must be an ID) instead of content. The element will be moved into the tooltip.
selectorIsChildBooleanfalseWhether the selector is a child of the element (the button or whatever it is). This lets us use find() on the element we already have, which might be a performance increase.

Events

Use events like this:

$(".bloom").bloom({
    opened: function ($element, $tooltip) {
        alert("Nice!");
    });
});
EventParametersDescription
opened$element, $tooltipCalled after the tooltip opens.
closed$element, $tooltipCalled after the tooltip closes.

Reinitializing

Tooltips can be reinitialized by calling bloom() on them again. This will overwrite the current values and reposition the tooltip if it's currently open.

$(".bloom").bloom();

$(".bloom").bloom({
    arrowY: 'top',
    arrowX: 'right'
});