Tooltips that bloom from a point.
A demonstration can be found here.
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>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!"
});- Type: string
- Horizontal position of the tooltip in relation to the element.
- Valid options are
center,top,bottom,right, andleft. - Default:
center
- Type: string
- Vertical position of the tooltip in relation to the element.
- Valid options are
center,top,bottom,right, andleft. - Default:
bottom
- Type: string
- This class will be added to the clicked element.
- Default:
active
- Type: boolean
- Whether to toggle the activeClass.
- Default:
true
- Type: string
- The content to place in the tooltip.
- Default:
No content found.
- Type: string
- Which skin to use (not implemented yet).
- Default:
default
- Type: number
- Speed to animate tooltip in in milliseconds.
- Default:
300
- Type: number
- Speed to animate tooltip out in milliseconds.
- Default:
200
- Type: boolean
- Whether to animate the tooltip or just show/hide it.
- Default:
true
- Type: boolean
- Whether to show arrows on the tooltip (arrows aren't implemented yet).
- Default:
true
- Type: string
- Horizontal position of the arrow in relation to the tooltip.
- Valid options are
left,center, andright. - Default:
center
- Type: string
- Vertical position of the arrow in relation to the tooltip.
- Valid options are
top,center, andbottom. - Default:
top
- Type: boolean
- Whether clicking outside of the tooltip should close it.
- Default:
false
- 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
- 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
Functions can be passed in and will execute during certain events.
$(.bloom').bloom({
opened: function ($element, $tooltip) {
alert('Nice!');
});
});- Called after the tooltip opens. It is passed the element and tooltip as jQuery objects.
- Default:
null
- Called after the tooltip closes. It is passed the element as a jQuery object.
- Default:
null
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'
});