Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Tooltip

Share via
Hinode
Link copied to clipboard

Use the tooltip shortcode to display a tooltip for a hyperlink.

On this page
 

  • Overview
  • Arguments
  • Examples
    • Colored tooltip
    • Placement

Overview  

Use the tooltip shortcode to display a tooltip for a hyperlink. Refer to the button on how to display a tooltip for a button instead. The inner content is used as hyperlink text. As an example, the following shortcode displays a tooltip for a colored hyperlink.

Tooltip demonstration
 
markdown
{{< tooltip color="info" title="Tooltip" href="#!" >}}
    Tooltip demonstration
{{< /tooltip >}}

Arguments  

The shortcode supports the following arguments:

ArgumentRequiredDescription
colorNoOptional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, or “dark”.
titleYesTitle to display in the tooltip.
hrefYesAddress for the button or hyperlink.
placementNoHow to position the tooltip: “top” (default), “bottom”, “left”, or “right”.
classNoOptional class attribute of the tooltip’s button element.

Examples  

Change the style of your tooltip with shortcode arguments.

Colored tooltip  

Set color to adjust the color of the text element to which the tooltip is applied. As an example, the following shortcodes display a tooltip for each available color.

Primary
 
•
Secondary
 
Secondary
 
•
Success
 
•
Danger
 
•
Warning
 
•
Info
 
•
Light
 
•
Dark
 
Dark
 
markdown
{{< tooltip color="primary" title="Tooltip" href="#!" >}}Primary{{< /tooltip >}}&bull;
{{< tooltip color="secondary" title="Tooltip" class="d-none-dark" href="#!" >}}Secondary{{< /tooltip >}}
{{< tooltip color="secondary" title="Tooltip" class="d-none-light bg-light" href="#!" >}}Secondary{{< /tooltip >}}&bull;
{{< tooltip color="success" title="Tooltip" href="#!" >}}Success{{< /tooltip >}}&bull;
{{< tooltip color="danger" title="Tooltip" href="#!" >}}Danger{{< /tooltip >}}&bull;
{{< tooltip color="warning" title="Tooltip" href="#!" >}}Warning{{< /tooltip >}}&bull;
{{< tooltip color="info" title="Tooltip" href="#!" >}}Info{{< /tooltip >}}&bull;
{{< tooltip color="light" title="Tooltip" class="bg-dark" href="#!" >}}Light{{< /tooltip >}}&bull;
{{< tooltip color="dark" title="Tooltip" class="d-none-dark" href="#!" >}}Dark{{< /tooltip >}}
{{< tooltip color="dark" title="Tooltip" class="d-none-light bg-light" href="#!" >}}Dark{{< /tooltip >}}

Placement  

Set placement to adjust the placement of the tooltip.

Top
 
•
Bottom
 
•
Left
 
•
Right
 
markdown
{{< tooltip title="Tooltip" href="#!" placement="top" >}}Top{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="bottom" >}}Bottom{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="left" >}}Left{{< /tooltip >}}&bull;
{{< tooltip title="Tooltip" href="#!" placement="right" >}}Right{{< /tooltip >}}
Last updated: August 27, 2023 • Improve contrast (5f1ddab)
On this page
  • Overview
  • Arguments
  • Examples
    • Colored tooltip
    • Placement
Tooltip
Tooltip
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard