• Home
  • Features
    • Menu TypesMultiple menus
      • YJ Mega CSS Dropdown
      • YJ Mega Smooth Dropdown
      • YJ Mega CSS Dropline
      • YJ Mega Smooth Dropline
      • Joomla Split Menu
      • Menu module position
    • TypographyStyle your text
    • Module PositionsOver 50 positions!
    • Module StylesCustom modules
    • Mega MenuMega menu sample
      • Group 1
        • Group 1 link 1
        • Group 1 link 2
          • Login Form

            • Forgot your password?
            • Forgot your username?
            • Create an account
      • Group 2
        • Group 2 link 1
        • Group 2 link 2
  • Layouts
    • Left-Mid-Right
    • Mid-Left-Right
    • Left-Right-Mid
  • Pages
    • User Pages
      • Login FormLogin Form demo
      • User Profile User Profile Demo
      • User RegistrationUser Registration Demo
      • Username ReminderUsername Reminder Demo
      • Password resetPassword reset demo
      • 404 page404 page demo
    • Content Views
      • Category Blog View
      • Category List View
      • Categories View
      • Archived View
    • Web links
    • Contacts
    • News feeds
    • Joomla Search
    • Joomla Tutorials
  • Shortcodes
  • Add-ons
  • Documentation

Tooltips

Yjsg v2 is equipped with simple CSS tooltips that you can use on any HTML elements.

options:

Options Description
data-yjsg-tip *Required option. Data attribute that contains the tooltip.
class="yjsg-tip-left" Display tooltip on the left side.
class="yjsg-tip-right" Display tooltip on the right side.
class="yjsg-tip-top" Display tooltip above the element
class="yjsg-tip-bottom" Display tooltip under the element

example:

Default tooltip

example:

Left tooltip

example:

Right tooltip

example:

Bottom tooltip

markup:

<a class="button" href="#" data-yjsg-tip="I am CSS tooltip">
    Default tooltip
</a>
<a class="yjsg-tip-left button" href="#" data-yjsg-tip="I am left tooltip">
    Left tooltip
</a>
<a class="yjsg-tip-right button" href="#" data-yjsg-tip="I am right tooltip">
    Right tooltip
</a>
<a class="yjsg-tip-bottom button" href="#" data-yjsg-tip="I am bottom tooltip">
    Bottom tooltip
</a>

Add-ons

  • Sticky
  • Labels
  • Tooltips
  • Off-canvas
  • Grid system
  • Smooth Scroll
  • Helper classes
  • Round progress bars

About YJSG

  • Download
  • Support
  • Blog
  • Documentation

About Joomla!

  • What is Joomla!?
  • Joomla! Documentation
  • Joomla! Community
  • Developer Tools

Bootstrap Info

  • Scaffolding
  • Base CSS
  • Components
  • Javascript

LESS CSS Info

  • What is LESS CSS?
  • Overview
  • Usage
  • Documentation

Youjoomla

  • Joomla! Templates
  • Joomla! Extensions
  • Meet The Team
  • YouJoomla Blog
  • YJSimpleGrid Features
  • Joomla! News
CSS Valid | XHTML Valid | Top | + | - | reset | RTL | LTR
Copyright © Eximium 2018 All rights reserved. Custom Design by Youjoomla.com
YJSimpleGrid Joomla! Templates Framework official website
Add-ons