tooltip-bloom.js
v2.1.1
Published
Tooltips that bloom from a point.
Downloads
4
Maintainers
0x0049Readme
bloom.js
Tooltips that bloom from a point.
Demo
A demonstration can be found here.
Basic usage
Bloom can be activated on any element, although semantically buttons might make the most sense.
<head>
<link href="bloom.css" rel="stylesheet">
</head>
<body>
<button type="button" class="bloom">Click me</button>
<script src="bloom.js"></script>
<script>
$('.bloom').bloom();
</script>
</body>Passing in options
All options can be added as data attributes on the element or passed in to the constructor.
<button type="button" class="bloom" data-content="I'm a tooltip!">Click me</button>$('.bloom').bloom({
content: "I'm a tooltip!"
});Full option list
x or data-x
- Type: string
- Horizontal position of the tooltip in relation to the element.
- Valid options are
center,top,bottom,right, andleft. - Default:
center
y or data-y
- Type: string
- Vertical position of the tooltip in relation to the element.
- Valid options are
center,top,bottom,right, andleft. - Default:
bottom
activeClass or data-active-class
- Type: string
- This class will be added to the clicked element.
- Default:
active
toggleClass or data-toggle-class
- Type: boolean
- Whether to toggle the activeClass.
- Default:
true
content or data-content
- Type: string
- The content to place in the tooltip.
- Default:
No content found.
useSkin or data-use-skin
- Type: string
- Which skin to use (not implemented yet).
- Default:
default
speedIn or data-speed-in
- Type: number
- Speed to animate tooltip in in milliseconds.
- Default:
300
speedOut or data-speed-out
- Type: number
- Speed to animate tooltip out in milliseconds.
- Default:
200
animate or data-animate
- Type: boolean
- Whether to animate the tooltip or just show/hide it.
- Default:
true
useArrow or data-use-arrow
- Type: boolean
- Whether to show arrows on the tooltip (arrows aren't implemented yet).
- Default:
true
arrowX or data-arrow-x
- Type: string
- Horizontal position of the arrow in relation to the tooltip.
- Valid options are
left,center, andright. - Default:
center
arrowY or data-arrow-y
- Type: string
- Vertical position of the arrow in relation to the tooltip.
- Valid options are
top,center, andbottom. - Default:
top
clickOutsideCloses or data-click-outside-closes
- Type: boolean
- Whether clicking outside of the tooltip should close it.
- Default:
false
selector or data-selector
- Type: string
- Use an element on the page (must be an ID) instead of content. The element will be moved into the tooltip.
- Default:
null
selectorIsChild or data-selector-is-child
- Type: boolean
- Whether 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.
- Default:
false
Events
Functions can be passed in and will execute during certain events.
$(.bloom').bloom({
opened: function ($element, $tooltip) {
alert('Nice!');
});
});opened
- Called after the tooltip opens. It is passed the element and tooltip as jQuery objects.
- Default:
null
closed
- Called after the tooltip closes. It is passed the element as a jQuery object.
- Default:
null
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'
});