Overview

Smart.Tooltip is used to display a popup message. The widget can be used in combination with any html element.

To initialize a Tooltip, the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.tooltip.js – the JS file containing the element definition

The following code adds a tooltip to the page and appends it to Smart.Button.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> </head> <body> <smart-button id="button">Button</smart-button> <smart-tooltip id="tooltip" selector="button" arrow>This is a tooltip</smart-tooltip> </body> </html>

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The tooltip must be attached to HTML element. This could be achieved by setting the selector property.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script> window.onload = function () { document.querySelector('smart-tooltip').selector = 'button2'; } </script> </head> <body> <smart-button id="button">Button</smart-button> <smart-button id="button2">Button2</smart-button> <smart-tooltip selector="button" arrow>This is a tooltip</smart-tooltip> </body> </html>

Demo

Smart.Tooltip could be positioned in few different positions.

  • top
  • right
  • bottom
  • left
  • absolute
 <smart-tooltip selector="button" position="top" arrow>This is a tooltip</smart-tooltip>

Demo

The tooltip could be with arrow when arrow property is set to true.

 <smart-tooltip selector="button" arrow>This is a tooltip</smart-tooltip>

Demo

In absolute position, tooltip’s arrow could be positioned on:

  • top
  • right
  • bottom
  • left
 <smart-tooltip selector="button" position="absolute" arrow arrow-direction="right">This is a tooltip</smart-tooltip>

Demo

The user could set custom tooltip template via the tooltipTemplate property. As a selector have to be used the template id.

 <template id="newTemplate">
     <div>Title:</div>
     <div>{{title}}</div>
 </template>

 <smart-tooltip selector="button" arrow tooltip-template="newTemplate">The avengers</smart-tooltip>

Demo

Behavior

The tooltip is displayed on hover of it’s selector, but also could be shown programatically via setting visible to true

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script> window.onload = function () { document.querySelector('smart-tooltip').visible = true; } </script> </head> <body> <smart-button id="button">Button</smart-button> <smart-tooltip selector="button">This is a tooltip</smart-tooltip> </body> </html>

Demo

Smart.Tooltip could displayed after particular delay. The delay is set as interval in miliseconds.

 <smart-tooltip selector="button" delay="200">This is a tooltip</smart-tooltip>

Demo

The element offers the following methods:

  • close – closes smart-tooltip.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.close();
         }
     </script>
    
  • open – opens smart-tooltip.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.open();
         }
     </script>
    
  • toggle – toggles smart-tooltip.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.toggle();
         }
     </script>