Tooltip - Documentation | www.HtmlElements.com

Overview

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

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.tooltip.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.tooltip.js - the JS file containing the element definition

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #tooltip is a smart-tooltip tag.

      import {smartTooltip} from "../../source/modules/smart.tooltip.js";
      
      Smart('#tooltip', class {
      get properties() {
      	return {
      		position: 'top',
      		selector: 'button'
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : tooltip.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const tooltip = document.querySelector("#tooltip"); and set the properties like that:
      const tooltip = document.querySelector("#tooltip");
      
      tooltip.opened = true;
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #tooltip is a DIV tag.

      import {smartTooltip} from "../../source/modules/smart.tooltip.js";
      
      document.readyState === 'complete' ? init() : tooltip.onload = init;
      
      function init() { 
      const tooltip = new smartTooltip('#tooltip', {
         	position: 'top',
      	selector: 'button'
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <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>

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

      Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const tooltip = document.createElement('smart-tooltip');

Append it to the DOM:
document.body.appendChild(tooltip);

Remove it from the DOM:
tooltip.parentNode.removeChild(tooltip);

Set a property:
tooltip.propertyName = propertyValue;

Get a property value:
const propertyValue = tooltip.propertyName;

Invoke a method:
tooltip.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

tooltip.addEventListener(eventName, eventHandler);

Remove Event Listener:
tooltip.removeEventListener(eventName, eventHandler, true);

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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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>