2.1.1 • Published 8 years ago
tooltip-bloom.js v2.1.1
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'
});