|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Tooltips can be used to display text labels that pop up when the user hovers, focuses on, or touches an element. They can be created by adding the data-toggle="tooltip" and data-title="..." attributes to an element, and requires no JavaScript.
<button class="btn" data-toggle="tooltip" data-title="Default tooltip" type="button">
Default
</button>
<button class="btn" data-toggle="tooltip" data-title="Top tooltip" data-placement="top" type="button">
Top
</button>
<button class="btn" data-toggle="tooltip" data-title="Right tooltip" data-placement="right" type="button">
Right
</button>
<button class="btn" data-toggle="tooltip" data-title="Bottom tooltip" data-placement="bottom" type="button">
Bottom
</button>
<button class="btn" data-toggle="tooltip" data-title="Left tooltip" data-placement="left" type="button">
Left
</button>The data-placement attribute can be set to top, bottom, left, or right to change the placement of the tooltip. If it is not set, the tooltip will pop up on top by default.
The data-title attribute is used instead of the title attribute (like in Bootstrap) because the title attribute pops up as the browser's default tooltip, which is impossible to disable without using JavaScript.
By default, tooltips will pop up on hover and focus on all devices. However, they can be configured to target only certain screen sizes. For example:
<!-- Tooltip will pop up on all screens -->
<button class="btn" data-toggle="tooltip" data-title="Show on all screens" type="button">
Default
</button>
<!-- Tooltip will pop up only on screens with widths > 768px -->
<button class="btn" data-toggle="tooltip" data-target-breakpoint="md" data-title="Show only on screens with widths > 768px" type="button">
> 768px
</button>
<!-- Tooltip will pop up only on screens with widths > 992px -->
<button class="btn" data-toggle="tooltip" data-target-breakpoint="lg" data-title="Show only on screens with widths > 992px" type="button">
> 992px
</button>Ideally, tooltips should be added to HTML elements that are traditionally keyboard-focusable and interactive. This will make the tooltips work for keyboard and assistive technology users.
Since the tooltips are created using the :before and :after attributes, they will not work properly on elements where the pseudo-elements have been overridden. The only notable examples that should be kept in mind are the following:
Moreover, they will also not work on self-closing elements such <img>, <input>, and <hr>. This should not be too much of an issue however, because tooltips should be added to HTML elements that are traditionally keyboard-focusable and interactive, as mentioned above.
Tooltips are pretty limited in scope as they have a fixed width, and only support static text. For this reason, they should be only used when displaying short popup messages to users.
If you want something more robust, we highly recommend our dropdown component (opens in new tab), which supports arrows, four directions of content placement (down, up, left, right), toggle on hover, and all types of content.
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .
