Added instructions for creating navtabs. Added documentation for configuration file options. Made a few style tweaks. Moved mini-TOC to float on the right. Redid the styling for the mini-TOC bar.
This commit is contained in:
Tom Johnson
@ -1,17 +1,17 @@
|
||||
title: Adding tooltips
|
||||
permalink: /adding_tooltips/
|
||||
tags: []
|
||||
keywords:
|
||||
audience:
|
||||
last_updated:
|
||||
summary:
|
||||
tags: [formatting]
|
||||
keywords: popovers
|
||||
audience: writers, designers
|
||||
last_updated: May 8, 2015
|
||||
summary: "You can add tooltips to your content. These tooltips work well for glossary definitions."
|
||||
---
|
||||
{% include linkrefs.html %}
|
||||
=======
|
||||
|
||||
## permalink: /adding_tooltips/
|
||||
|
||||
You can add tooltips to your content. Because this theme is built on Bootstrap, you can simply use a specific attribute on an element to insert a tooltip. test...
|
||||
Because this theme is built on Bootstrap, you can simply use a specific attribute on an element to insert a tooltip.
|
||||
|
||||
Suppose you have a glossary.yml file inside your _data folder. You could pull in that glossary definition like this:
|
||||
|
||||
|
||||
105
pages/formatting/navtabs.md
Normal file
105
pages/formatting/navtabs.md
Normal file
@ -0,0 +1,105 @@
|
||||
---
|
||||
title: NavTabs Demo
|
||||
permalink: /navtabs/
|
||||
tags: []
|
||||
keywords:
|
||||
audience:
|
||||
last_updated:
|
||||
summary: "Navtabs provide a tabbable navagation directly in your content. Navtabs are helpful for showing code samples for different programming languages."
|
||||
---
|
||||
{% include linkrefs.html %}
|
||||
|
||||
## Common uses
|
||||
|
||||
Navtabs are particularly useful for scenarios where you want to show a variety of options, such as code samples for Java, .NET, or PHP, on the same page.
|
||||
|
||||
While you could resort to single-source publishing to provide different outputs for each unique programming language or role, you could also use navtabs to allow users to select the content you want.
|
||||
|
||||
Navtabs are better for SEO since you avoid duplicate content and drive users to the same page.
|
||||
|
||||
## Navtabs demo
|
||||
|
||||
The following is a demo of a navtab. Refresh your page to see the tab you selected remain active.
|
||||
|
||||
<ul id="profileTabs" class="nav nav-tabs">
|
||||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#about" data-toggle="tab">About</a></li>
|
||||
<li><a href="#match" data-toggle="tab">Match</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="profile">
|
||||
<h2>Profile</h2>
|
||||
<p>Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.</p>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="about">
|
||||
<h2>About</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.about</p></div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="match">
|
||||
<h2>Match</h2>
|
||||
<p>Vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Code
|
||||
|
||||
Here's the code for the above (with the filler text abbreviated):
|
||||
|
||||
```html
|
||||
<ul id="profileTabs" class="nav nav-tabs">
|
||||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#about" data-toggle="tab">About</a></li>
|
||||
<li><a href="#match" data-toggle="tab">Match</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="profile">
|
||||
<h2>Profile</h2>
|
||||
<p>Praesent sit amet fermentum leo....</p>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="about">
|
||||
<h2>About</h2>
|
||||
<p>Lorem ipsum ...</p></div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="match">
|
||||
<h2>Match</h2>
|
||||
<p>Vel vehicula ....</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Design constraints
|
||||
|
||||
Bootstrap automatically clears any floats after the navtab. If you have a navtab that appears in the same space as pagemetadata floating column, there will be a big space after the navtab until the end of the pagemetadata element because there's a `clear: float` property applied after the nav class.
|
||||
|
||||
If you change the `clear:float` property, the first heading/text on the tab will suddenly float along side the tab, which is unfortunate.
|
||||
|
||||
## Appearance in the mini-TOC
|
||||
|
||||
If you put a heading in the navtab content, that heading will appear in the mini-TOC as long as the heading tag has an ID. If you don't want the headings for each navtab section to appear in the mini-TOC, simply omit the ID attribute from the heading tag. Without this attribute, the mini-TOC won't insert the heading title into the mini-TOC.
|
||||
|
||||
## Must use HTML
|
||||
|
||||
You must use HTML within the navtab content because each navtab section is surrounded with HTML, and you can't use Markdown inside of HTML.
|
||||
|
||||
## Match up ID tags
|
||||
|
||||
Each tab's `href` attribute must match the `id` attribute of the tab content's `div` section. So if your tab has `href="#acme"`, then you add `acme` as the ID attribute in `<div role="tabpanel" class="tab-pane" id="acme">`.
|
||||
|
||||
One of the tabs needs to be set as active, depending on what tab you want to be open by default (usually the first one).
|
||||
|
||||
```html
|
||||
<div role="tabpanel" class="tab-pane active" id="acme">
|
||||
```
|
||||
|
||||
## Sets a cookie
|
||||
|
||||
The navtabs are part of Bootstrap, but this theme sets a cookie to remember the last tab's state. The js/customscripts.js file has a long chunk of JavaScript that sets the cookie. The JavaScript comes from [this StackOverflow thread](http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload).
|
||||
|
||||
By setting a cookie, if the user refreshes the page, the active tab is the tab the user last selected (rather than defaulting to the default active tab).
|
||||
|
||||
## Functionality to implement
|
||||
|
||||
One piece of functionality I'd like to implement is the ability to set site-wide nav tab options. For example, if the user always chooses PHP instead of Java in the code samples, it would be great to set this option site-wide by default. However, this functionality isn't yet coded.
|
||||
|
||||
Reference in New Issue
Block a user