1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-24 03:54:42 +04:00

tooltips and cursors

This commit is contained in:
Martyna
2020-02-21 09:50:21 +01:00
parent 5194cfa44f
commit 596a84d2ca
2 changed files with 14 additions and 7 deletions
+9 -6
View File
@@ -1,17 +1,20 @@
---
title: Cursors
description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
menu: docs.cursors
---
## Cursor utilities
- `.cursor-auto`- cursor style depends on what's inside element
- `.cursor-pointer` - pointing cursor
- `.cursor-move` - cursor showing that user can move something
- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
- `.cursor-zoom-in` - cursor showing that user can zoom in
- `.cursor-zoom-out` - cursor showing that user can zoom out
Use one of the available cursor utilities depending on the action you want to indicate.
- `.cursor-auto`- the cursor style depends on what's inside a given element
- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
- `.cursor-move` - a cursor which shows that a given element can be moved
- `.cursor-not-allowed` - a cursor which shows that a user is not allowed to perform an action on an element
- `.cursor-zoom-in` - a cursor which shows that a user can zoom in
- `.cursor-zoom-out` - a cursor which shows that a user can zoom out
{% capture code %}
<div class="row text-center">
+5 -1
View File
@@ -1,13 +1,15 @@
---
title: Tooltips
menu: docs.tooltips
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
bootstrap-link: components/tooltips/
---
## Default markup
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
@@ -27,6 +29,8 @@ bootstrap-link: components/tooltips/
## Tooltip with HTML
If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML