mirror of
https://github.com/docker/docs.git
synced 2026-03-29 23:38:56 +07:00
6c54a3179a
* Draft Signed-off-by: Chris Chinchilla <chris.ward@docker.com> * Update style guides, add vale rules, and fix style guide voilations Signed-off-by: Chris Chinchilla <chris.ward@docker.com> Further changes Signed-off-by: Chris Chinchilla <chris.ward@docker.com> * Add units mention Signed-off-by: Chris Chinchilla <chris.ward@docker.com> * Add more details to links Signed-off-by: Chris Chinchilla <chris.ward@docker.com> * Correct internal anchor Signed-off-by: Chris Chinchilla <chris.ward@docker.com> --------- Signed-off-by: Chris Chinchilla <chris.ward@docker.com>
2.2 KiB
2.2 KiB
description, title, toc_max
| description | title | toc_max |
|---|---|---|
| components and formatting examples used in Docker's docs | Tooltips | 3 |
Tooltips aren't visible on mobile devices or touchscreens, so don't rely on them as the only way to communicate important info.
Examples
Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right
This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird). {:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
HTML
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird).
{:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
<a href="/contribute/components" target="_blank" rel="noopener" class="_"><span class="badge badge-info" data-toggle="tooltip" data-placement="right" title="Open the test page (in a new window)">Test</span></a>