1. Tutorials
  2. Creating a Responsive Custom ToolTips using HTML, CSS, and JavaScript Tutorial

Creating a Responsive Custom ToolTips using HTML, CSS, and JavaScript Tutorial

Submitted by oretnom23 on Saturday, April 1, 2023 - 15:27.

In this tutorial, you can learn how to create a Responsive Custom ToolTip using HTML, CSS, and JavaScript. The tutorial aims to provide students and beginners with a reference for learning to create or looking for a script of the Responsive ToolTip Component. Here, I will be providing reusable scripts of this component and a sample web page that demonstrate the Custom Tooltip Component.

What is ToolTip?

A ToolTip is sort of a popup message or text content describing the hovered element or the cursor is positioned over the element. For example, a program page has multiple buttons that show only icons or images and developers often implement a tooltip component to the buttons to describe the purpose/name/action of the button.

How to Create a Responsive Custom ToolTip?

In HTML, there is a built-in tag or element attribute called title which is used for describing the link, icon, etc. But some developers often use a custom tooltip so they can design the tooltip element that suits the design of their program or so they can use HTML string. We can simply create a custom ToolTip by creating an HTML element for the wrapper or container of the tooltip content, design the tooltip element with CSS, and make it function using Pure JavaScript. Check out the following reusable scripts that I created to understand it more.

Reusable Scripts

The scripts below are the reusable scripts that I created the result into a custom ToolTip for websites or web applications. It outputs a responsive tooltip that automatically repositions for any device screen (desktop, laptop, and mobile)

Stylesheet Script

Here's the CSS file script that designs the Tooltip Wrapper/Container and content elements.

  1. /* Tooltip Wrapper */
  2. .tooltip-wrapper {
  3.         position: absolute;
  4.         background: #ffffff;
  5.         padding: 0.35em 0.75em;
  6.         border: 1px solid #e3e2e2;
  7.         box-shadow: 0px 0px 3px #7e7e7e26;
  8.         max-width: 300px;
  9.         min-width: 50px;
  10.         border-radius: 5px;
  11.         z-index: 99;
  12. }
  13.  
  14. /* Tooltip pointer */
  15. .tooltip-wrapper:before {
  16.         content: "";
  17.         position: absolute;
  18.         width: 1.3rem;
  19.         height: 1.3rem;
  20.         z-index: 99;
  21.         background: #fff;
  22.         rotate: 45deg;
  23. }
  24. /* Tooltip pointer for Right Position */
  25. .tooltip-wrapper[data-position="right"]:before{
  26.         left: -0.65rem;
  27.         top: calc(50% - 1.3rem + 0.7em);
  28. }
  29. /* Tooltip pointer for Left Position */
  30. .tooltip-wrapper[data-position="left"]:before{
  31.         right: -0.65rem;
  32.         top: calc(50% - 1.3rem + 0.7em);
  33. }
  34. /* Tooltip pointer for Top Position */
  35. .tooltip-wrapper[data-position="top"]:before{
  36.         bottom: -0.65rem;
  37.         right: calc(50% - 1.3rem + 0.7em);
  38. }
  39. /* Tooltip pointer for Bottom Position */
  40. .tooltip-wrapper[data-position="bottom"]:before{
  41.         top: -0.65rem;
  42.         right: calc(50% - 1.3rem + 0.7em);
  43. }
  44. /* Tooltip Content Block */
  45. .tooltip-wrapper .tooltip-content {
  46.         position: relative;
  47.         backface-visibility: hidden;
  48.         z-index: 100;
  49. }

JavaScript

Here's the JavaScript file script that makes the tooltip functional and creates the elements tooltips.

  1. /**
  2. * Creating Tooltip Wrapper Element
  3. */
  4. const tooltipWrapper = document.createElement('div')
  5.                 tooltipWrapper.classList.add('tooltip-wrapper')
  6.                 tooltipWrapper.innerHTML = `<div class="tooltip-content"></div>`
  7.  
  8. /**
  9. * Selecting all elements that has tooltip Attribute
  10. */
  11. const tooltipEls = document.querySelectorAll('[data-tooltip]')
  12.  
  13. /**
  14. * Show Tootlip of the Element
  15. * @param {dom} el - selected comment
  16. * @param {dom} toolTipEl - cloned ToolTip Element
  17. */
  18. const showToolTip = (el, toolTipEl) =>{
  19.         // Getting the Element Tooltip Element
  20.         var _content = el.dataset.tooltip || "";
  21.         // Getting the Element Tooltip Element Position
  22.         var _pos = el.dataset.tooltipPosition || "right";
  23.         // Getting the ViewPort Width
  24.         var _vpWidth = window.outerWidth
  25.         // Getting the ViewPort Height
  26.         var _vpHeight = window.outerHeight
  27.         // Setting up the Tooltip Content
  28.         toolTipEl.querySelector('.tooltip-content').innerText = _content
  29.         // Setting up the Tooltip Position Attribute
  30.         toolTipEl.dataset.position = _pos
  31.        
  32.         // Getting the Element's Bounding Rectangle
  33.         var rect = el.getBoundingClientRect()
  34.        
  35.         // Temporarily hide the tooltip
  36.         toolTipEl.style.visibility = `hidden`
  37.         // Append the Tooltip Element to the document body
  38.         document.body.appendChild(toolTipEl)
  39.         // Tooltip Height
  40.         var tipHeight = toolTipEl.clientHeight
  41.         // Tooltip Width
  42.         var tipWidth = toolTipEl.clientWidth
  43.  
  44.         if(_pos == 'right'){
  45.                 // Setting Up the Tooltip Postion at the right side of the element
  46.                 toolTipEl.style.left = `calc(${rect.right}px + 1.3rem)`
  47.                 toolTipEl.style.top = `${(rect.top + (rect.height / 2)) - (tipHeight / 2)}px`
  48.         }
  49.         if(_pos == 'left'){
  50.                 // Setting Up the Tooltip Postion at the left side of the element
  51.                 toolTipEl.style.left = `calc(${rect.left - tipWidth}px - 1.3rem)`
  52.                 toolTipEl.style.top = `${(rect.top + (rect.height / 2)) - (tipHeight / 2)}px`
  53.         }
  54.         if(_pos == 'top'){
  55.                 // Setting Up the Tooltip Postion at the top side of the element
  56.                 toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  57.                 toolTipEl.style.top = `calc(${rect.top - tipHeight}px - 1.3rem)`
  58.         }
  59.         if(_pos == 'bottom'){
  60.                 // Setting Up the Tooltip Postion at the bottom side of the element
  61.                 toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  62.                 toolTipEl.style.top = `calc(${rect.bottom}px + 1.3rem)`
  63.         }
  64.         // Getting the Tooltip Element Bounding Rectangle
  65.         var ttRect = toolTipEl.getBoundingClientRect()
  66.  
  67.         /**
  68.         * Making the Tootltip Responsive
  69.         */
  70.         if((ttRect.left + ttRect.width) >  _vpWidth || ttRect.left < 0 || (((ttRect.top + ttRect.height) >  _vpHeight || ttRect.top <  0) && (_pos == "top" || _pos == "bottom"))){
  71.                 if((rect.top -  ttRect.height) > 0 ){
  72.                         // Repositioning the Tooltip to the top of element becuase it overflows from the page viewport
  73.                         toolTipEl.dataset.position = `top`
  74.                         toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  75.                         toolTipEl.style.top = `calc(${rect.top - tipHeight}px - 1.3rem)`
  76.                 }else{
  77.                         // Repositioning the Tooltip to the bottom of element becuase it overflows from the page viewport
  78.                         toolTipEl.dataset.position = `bottom`
  79.                         toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  80.                         toolTipEl.style.top = `calc(${rect.bottom}px + 1.3rem)`
  81.                 }
  82.         }
  83.         toolTipEl.style.visibility = `visible`
  84.  
  85. }
  86.  
  87. /**
  88. * Closing the Tooltip
  89. * @param {dom} toolTipEl - tooltip element
  90. */
  91. const closeToolTip = (toolTipEl) =>{
  92.         toolTipEl.remove()
  93. }
  94. tooltipEls.forEach(el =>{
  95.         el.addEventListener('mouseenter', e=>{
  96.                 // Trigger tooltip element to show when the element is being hovered
  97.                 var toolTipEl = tooltipWrapper.cloneNode(true)
  98.                 showToolTip(el, toolTipEl)
  99.                 el.addEventListener('mouseout', e=>{
  100.                         closeToolTip(toolTipEl)
  101.                 })
  102.                 // Closing the tootlip if client press the 'Esc' (Escape) key
  103.                 document.body.addEventListener('keyup', e => {
  104.                         if(e.key == 'Escape' || e.code == 'Escape' || e.keyCode == 27 || e.which == 27)
  105.                         closeToolTip(toolTipEl)
  106.                 })
  107.                 // Closing the tootlip if the page is scrolled
  108.                 window.addEventListener('scroll', function(e) {
  109.                         closeToolTip(toolTipEl)
  110.                 }, true);
  111.                 // Closing the tootlip if the page is resized
  112.                 window.addEventListener('resize', function(e) {
  113.                         closeToolTip(toolTipEl)
  114.                 }, true);
  115.         })
  116. })

Syntax

Here is the sample HTML syntax to implement the custom ToolTip to a certain element.

  1. <button type="button" data-tooltip="Nullam nec dapibus orci, eget volutpat lorem." data-tooltip-position="top">Hover Me</button>

Sample Web Page

Here are the scripts that result in a simple web page that demonstrate the custom tooltip scripts that I provided above.

HTML

The following HTML script is known as index.html.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Custom ToolTips - HTML, CSS and JS</title>
  8.         <link rel="preconnect" href="https://fonts.googleapis.com">
  9.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  11.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
  12.         <link rel="stylesheet" href="style.css">
  13.         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  14. </head>
  16.         <div class="content-md-lg py-3">
  17.                 <div class="col-lg-8 col-md-10 col-sm-12 col-12 mx-auto">
  18.                         <div class="page-title">Custom ToolTips using HTML, CSS, and JavaScript</div>
  19.                         <hr style="margin:auto; width:25px" class="border-light opacity-100">
  20.                 </div>
  21.                 <!-- Sample Elements with Tooltips Wrapper -->
  22.                 <div class="col-lg-8 col-md-10 col-sm-12 col-12 mx-auto">
  23.                         <div class="row">
  24.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  25.                                         <div class="tootlip-sample-item" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-tooltip-position="right">Tooltip #1</div>
  26.                                 </div>
  27.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  28.                                         <div class="tootlip-sample-item" data-tooltip="Cras non pulvinar nibh. Phasellus volutpat sem eu magna volutpat, et eleifend ante consectetur." data-tooltip-position="bottom">Tooltip #2</div>
  29.                                 </div>
  30.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  31.                                         <div class="tootlip-sample-item" data-tooltip="Suspendisse potenti. Phasellus sollicitudin pulvinar sem eget egestas." data-tooltip-position="left">Tooltip #3</div>
  32.                                 </div>
  33.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  34.                                         <div class="tootlip-sample-item" data-tooltip="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." data-tooltip-position="right">Tooltip #4</div>
  35.                                 </div>
  36.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  37.                                         <div class="tootlip-sample-item" data-tooltip="Cras in dui sit amet nisi vehicula ultrices. Vivamus ac augue eleifend, suscipit velit vel, semper justo. Duis sit amet ligula ac nibh hendrerit pellentesque." data-tooltip-position="top">Tooltip #5</div>
  38.                                 </div>
  39.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  40.                                         <div class="tootlip-sample-item" data-tooltip="Fusce ipsum magna, hendrerit eu turpis vitae, vulputate varius orci." data-tooltip-position="left">Tooltip #6</div>
  41.                                 </div>
  42.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  43.                                         <div class="tootlip-sample-item" data-tooltip="Nullam nec dapibus orci, eget volutpat lorem.">Tooltip #7</div>
  44.                                 </div>
  45.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  46.                                         <div class="tootlip-sample-item" data-tooltip="Quisque elementum ipsum nec rutrum pulvinar." data-tooltip-position="bottom">Tooltip #8</div>
  47.                                 </div>
  48.                                 <div class="col-lg-4 col-md-6 col-sm-12 col-12">
  49.                                         <div class="tootlip-sample-item" data-tooltip="Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." data-tooltip-position="left">Tooltip #9</div>
  50.                                 </div>
  51.                         </div>
  52.                 </div>
  53.                 <!-- Sample Elements with Tooltips Wrapper -->
  54.         </div>
  55.         <script src="script.js"></script>
  56. </body>
  57. </html>

CSS

The following CSS script is known as style.css.

  1. @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2.  
  3. *{
  4.         box-sizing: border-box;
  5.         font-family: 'Exo 2', sans-serif;
  6. }
  7. /**
  8. Page Design
  9. */
  10. body,
  11. html{
  12.         height: 100%;
  13.         width: 100%;
  14.         margin: 0;
  15.         padding: 0;
  16.         overflow-x:hidden;
  17. }
  18. body{
  19.         background-color: #282A3A;
  20. }
  21. .page-title{
  22.         font-size: 2.5rem;
  23.         font-weight: 500;
  24.         color: #fff;
  25.         letter-spacing: 3px;
  26.         font-family: var(--secular-font);
  27.         text-align: center;
  28.         text-shadow: 0px 0px 3px #2020208c;
  29. }
  30. .border-dark-subtle{
  31.         border-color: var(--border-dark-subtle) !important;
  32. }
  33.  
  34. /* Sample Elements Design */
  35.  
  36. .tootlip-sample-item {
  37.         margin: 0.5em auto;
  38.         width: 80%;
  39.         padding: 0.5em 0.75em;
  40.         background: #4a9de3;
  41.         color: #fff;
  42.         border-radius: 10px;
  43.         box-shadow: 2px 2px 6px #9d9b9b;
  44.         font-weight: 600;
  45.         text-align: center;
  46.         cursor: pointer;
  47. }
  48.  
  49. /* Tooltip Wrapper */
  50. .tooltip-wrapper {
  51.         position: absolute;
  52.         background: #ffffff;
  53.         padding: 0.35em 0.75em;
  54.         border: 1px solid #e3e2e2;
  55.         box-shadow: 0px 0px 3px #7e7e7e26;
  56.         max-width: 300px;
  57.         min-width: 50px;
  58.         border-radius: 5px;
  59.         z-index: 99;
  60. }
  61.  
  62. /* Tooltip pointer */
  63. .tooltip-wrapper:before {
  64.         content: "";
  65.         position: absolute;
  66.         width: 1.3rem;
  67.         height: 1.3rem;
  68.         z-index: 99;
  69.         background: #fff;
  70.         rotate: 45deg;
  71. }
  72. /* Tooltip pointer for Right Position */
  73. .tooltip-wrapper[data-position="right"]:before{
  74.         left: -0.65rem;
  75.         top: calc(50% - 1.3rem + 0.7em);
  76. }
  77. /* Tooltip pointer for Left Position */
  78. .tooltip-wrapper[data-position="left"]:before{
  79.         right: -0.65rem;
  80.         top: calc(50% - 1.3rem + 0.7em);
  81. }
  82. /* Tooltip pointer for Top Position */
  83. .tooltip-wrapper[data-position="top"]:before{
  84.         bottom: -0.65rem;
  85.         right: calc(50% - 1.3rem + 0.7em);
  86. }
  87. /* Tooltip pointer for Bottom Position */
  88. .tooltip-wrapper[data-position="bottom"]:before{
  89.         top: -0.65rem;
  90.         right: calc(50% - 1.3rem + 0.7em);
  91. }
  92. /* Tooltip Content Block */
  93. .tooltip-wrapper .tooltip-content {
  94.         position: relative;
  95.         backface-visibility: hidden;
  96.         z-index: 100;
  97. }

JavaScript

The following JS script is known as script.js.

  1. /**
  2. * Creating Tooltip Wrapper Element
  3. */
  4. const tooltipWrapper = document.createElement('div')
  5.                 tooltipWrapper.classList.add('tooltip-wrapper')
  6.                 tooltipWrapper.innerHTML = `<div class="tooltip-content"></div>`
  7.  
  8. /**
  9. * Selecting all elements that has tooltip Attribute
  10. */
  11. const tooltipEls = document.querySelectorAll('[data-tooltip]')
  12.  
  13. /**
  14. * Show Tootlip of the Element
  15. * @param {dom} el - selected comment
  16. * @param {dom} toolTipEl - cloned ToolTip Element
  17. */
  18. const showToolTip = (el, toolTipEl) =>{
  19.         // Getting the Element Tooltip Element
  20.         var _content = el.dataset.tooltip || "";
  21.         // Getting the Element Tooltip Element Position
  22.         var _pos = el.dataset.tooltipPosition || "right";
  23.         // Getting the ViewPort Width
  24.         var _vpWidth = window.outerWidth
  25.         // Getting the ViewPort Height
  26.         var _vpHeight = window.outerHeight
  27.         // Setting up the Tooltip Content
  28.         toolTipEl.querySelector('.tooltip-content').innerText = _content
  29.         // Setting up the Tooltip Position Attribute
  30.         toolTipEl.dataset.position = _pos
  31.        
  32.         // Getting the Element's Bounding Rectangle
  33.         var rect = el.getBoundingClientRect()
  34.        
  35.         // Temporarily hide the tooltip
  36.         toolTipEl.style.visibility = `hidden`
  37.         // Append the Tooltip Element to the document body
  38.         document.body.appendChild(toolTipEl)
  39.         // Tooltip Height
  40.         var tipHeight = toolTipEl.clientHeight
  41.         // Tooltip Width
  42.         var tipWidth = toolTipEl.clientWidth
  43.  
  44.         if(_pos == 'right'){
  45.                 // Setting Up the Tooltip Postion at the right side of the element
  46.                 toolTipEl.style.left = `calc(${rect.right}px + 1.3rem)`
  47.                 toolTipEl.style.top = `${(rect.top + (rect.height / 2)) - (tipHeight / 2)}px`
  48.         }
  49.         if(_pos == 'left'){
  50.                 // Setting Up the Tooltip Postion at the left side of the element
  51.                 toolTipEl.style.left = `calc(${rect.left - tipWidth}px - 1.3rem)`
  52.                 toolTipEl.style.top = `${(rect.top + (rect.height / 2)) - (tipHeight / 2)}px`
  53.         }
  54.         if(_pos == 'top'){
  55.                 // Setting Up the Tooltip Postion at the top side of the element
  56.                 toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  57.                 toolTipEl.style.top = `calc(${rect.top - tipHeight}px - 1.3rem)`
  58.         }
  59.         if(_pos == 'bottom'){
  60.                 // Setting Up the Tooltip Postion at the bottom side of the element
  61.                 toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  62.                 toolTipEl.style.top = `calc(${rect.bottom}px + 1.3rem)`
  63.         }
  64.         // Getting the Tooltip Element Bounding Rectangle
  65.         var ttRect = toolTipEl.getBoundingClientRect()
  66.  
  67.         /**
  68.         * Making the Tootltip Responsive
  69.         */
  70.         if((ttRect.left + ttRect.width) >  _vpWidth || ttRect.left < 0 || (((ttRect.top + ttRect.height) >  _vpHeight || ttRect.top <  0) && (_pos == "top" || _pos == "bottom"))){
  71.                 if((rect.top -  ttRect.height) > 0 ){
  72.                         // Repositioning the Tooltip to the top of element becuase it overflows from the page viewport
  73.                         toolTipEl.dataset.position = `top`
  74.                         toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  75.                         toolTipEl.style.top = `calc(${rect.top - tipHeight}px - 1.3rem)`
  76.                 }else{
  77.                         // Repositioning the Tooltip to the bottom of element becuase it overflows from the page viewport
  78.                         toolTipEl.dataset.position = `bottom`
  79.                         toolTipEl.style.left = `${(rect.left + (rect.width / 2)) - (tipWidth / 2)}px`
  80.                         toolTipEl.style.top = `calc(${rect.bottom}px + 1.3rem)`
  81.                 }
  82.         }
  83.         toolTipEl.style.visibility = `visible`
  84.  
  85. }
  86.  
  87. /**
  88. * Closing the Tooltip
  89. * @param {dom} toolTipEl - tooltip element
  90. */
  91. const closeToolTip = (toolTipEl) =>{
  92.         toolTipEl.remove()
  93. }
  94. tooltipEls.forEach(el =>{
  95.         el.addEventListener('mouseenter', e=>{
  96.                 // Trigger tooltip element to show when the element is being hovered
  97.                 var toolTipEl = tooltipWrapper.cloneNode(true)
  98.                 showToolTip(el, toolTipEl)
  99.                 el.addEventListener('mouseout', e=>{
  100.                         closeToolTip(toolTipEl)
  101.                 })
  102.                 // Closing the tootlip if client press the 'Esc' (Escape) key
  103.                 document.body.addEventListener('keyup', e => {
  104.                         if(e.key == 'Escape' || e.code == 'Escape' || e.keyCode == 27 || e.which == 27)
  105.                         closeToolTip(toolTipEl)
  106.                 })
  107.                 // Closing the tootlip if the page is scrolled
  108.                 window.addEventListener('scroll', function(e) {
  109.                         closeToolTip(toolTipEl)
  110.                 }, true);
  111.                 // Closing the tootlip if the page is resized
  112.                 window.addEventListener('resize', function(e) {
  113.                         closeToolTip(toolTipEl)
  114.                 }, true);
  115.         })
  116. })
  117.    

Snapshots

Here are the snapshots of the overall result of the sample web page scripts that I provided above.

Top Position

Custom Tooltip using HTML, CSS, and JS

Bottom Position

Custom Tooltip using HTML, CSS, and JS

Left Position

Custom Tooltip using HTML, CSS, and JS

Right Position

Custom Tooltip using HTML, CSS, and JS

There you go! I have provided also the complete source code zip file of the sample web page script I provided above on this website. Feel free to download and modify it to do some experiments. To download it, kindly click the download button located below this tutorial's content.

That's it! I hope this Creating a Responsive Custom ToolTips using HTML, CSS, and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
Javascript
CSS Tutorial
CSS Tricks
JS tutorial
JS Tricks
ToolTips
Responsive ToolTips
Custom ToolTips

Add new comment

About text formats
  • 694 views