Fork me on GitHub

Tooltip

Gives users contextual information or content, such as help text or images.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the AutoComplete module.

AUI().use(
  'aui-tooltip',
  function(A) {
    // code goes here
  }
);

Using Tooltip

Create an HTML element:

<a href="#" id="myTooltip">Hover for a simple tooltip</a>

Now create a new instance of the Tooltip component, set some HTML element to trigger and tell bodyContent what text the tooltip going to display. Finally, let's render it!

AUI().use(
  'aui-tooltip',
  function(A) {
    new A.Tooltip(
      {
        bodyContent: 'Lorem ipsum sit amet, consectetur elit.',
        trigger: '#myTooltip'
      }
    ).render();
  }
);

Configuring Tooltip

There are some other options that you can pass to your Tooltip instance.

For example, you can set the content of a tooltip with the title attribute of a HTML element by setting title to true.

AUI().use(
  'aui-tooltip',
  function(A) {
    new A.Tooltip(
      {
        title: true,
        trigger: '#myTooltip'
      }
    ).render();
  }
);

Also, you can hide the tooltip's arrow by setting showArrow to false.

AUI().use(
  'aui-tooltip',
  function(A) {
    new A.Tooltip(
      {
        showArrow: false,
        trigger: '#myTooltip'
      }
    ).render();
  }
);

You can even change the position of the tooltip.

AUI().use(
  'aui-tooltip',
  function(A) {
    new A.Tooltip(
      {
        align: {
          points: ['bc', 'tc']
        },
        trigger: '#myTooltip'
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.