Skip to content

Tooltip

Example#

preview

Code-example#

<!--.
button#button.cls(tooltip="title: Hello World; pos: top-left") open tt 
    measmatic-tooltip(label="Hey")


measmatic-tooltip(label="top" position="top")

measmatic-tooltip(label="bottom" position="bottom")

measmatic-tooltip(label="right" position="right")

measmatic-tooltip(label="left" position="left")

measmatic-tooltip(label="top-right" position="top-right")

measmatic-tooltip(label="top-left" position="top-left")

measmatic-tooltip(label="bottom-right" position="bottom-right")

measmatic-tooltip(label="bottom-left" position="bottom-left")

measmatic-tooltip(label="Hey" delay="500")

measmatic-tooltip(label="Hey" duration="1000")

-->
<measmatic-grid>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">none
    <div class="measmatic-tooltip-content">.</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">top left
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top-left">...</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">top
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top">..</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">top right
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top-right">...</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">right
    <div class="measmatic-tooltip-content measmatic-tooltip-content__right">....</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">bottom right
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom-right">.....</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">bottom
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom">......</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">bottom left
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom-left">.......</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">left
    <div class="measmatic-tooltip-content measmatic-tooltip-content__left">.......</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__show" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">center
    <div class="measmatic-tooltip-content measmatic-tooltip-content__center">........</div>
  </div>
  <div class="measmatic-tooltip measmatic-tooltip__hover" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">hover test
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top-left">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top-right">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__right">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom-right">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom-left">.</div>
    <div class="measmatic-tooltip-content measmatic-tooltip-content__left">.</div>
  </div>
  <button style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;" onclick="this.tooltip = createTooltip(this,{})">Javascript</button>
  <div id="htmlelement1" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">HTMLElement
    <measmatic-tooltip label="default"></measmatic-tooltip>
  </div>
  <div id="htmlelement2" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">HTMLElement
    <measmatic-tooltip label="delay=2000" position="top" delay="2000"></measmatic-tooltip>
  </div>
  <div id="htmlelement3" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">HTMLElement
    <measmatic-tooltip label="duration=2000" position="top" duration="2000"></measmatic-tooltip>
  </div>
  <div id="htmlelement4" style="margin:50px; padding-left:0; border:solid 1px red; width:max-content;">HTMLElement
    <measmatic-tooltip label="delay,duration=2000" position="top" delay="2000" duration="2000"></measmatic-tooltip>
  </div>
  <div style="margin:50px;">
    <div>
      <button onclick="document.querySelector('#nohover').tooltip.show()">show</button>
      <button onclick="document.querySelector('#nohover').tooltip.hide()">hide</button>
      <button onclick="document.querySelector('#nohover').tooltip.pop()">pop</button>
    </div>
    <div id="nohover" style="padding-left:0; border:solid 1px red; width:max-content;">nohover
      <measmatic-tooltip label="delay,duration=500" hover="false" position="bottom" delay="500" duration="500"></measmatic-tooltip>
    </div>
  </div>
</measmatic-grid>

Measmatic-tooltip#

Tooltips can be generated by three different ways. Once generated the tooltip will add as a property in the parent Element and can be modified and triggered there.

Building

1.Custom-element

<div id="parent">HTML-Element
    <measmatic-tooltip position="top" duration="2000" delay="2000" label="custom-element" hover="false"></measmatic-tooltip>
</div>

After initialising will be removed from the dom but the tooltip itself will be placed in the parent element and its propertys and functions are avaivable at parent.tooltip.

2.Javascript

<div id="parent">
</div>

<script>
var parent = document.getElementById("parent");
parent.tooltip = createTooltip(parent,{
    position:"top",
    duration:0,
    delay:0,
    label:"Hello Tooltip",
    hover:false
})
parent.tooltip.pop();
</script>

3.Html

hoverable tooltip at top-left position 

<div id="parent" class="measmatic-tooltip measmatic-tooltip__hover">HTML-Element
    <div class="measmatic-tooltip-content measmatic-tooltip-content__top-left">Tooltip top-left</div>
</div>

tooltip at bottom position without hover

<div id="parent" class="measmatic-tooltip">HTML-Element
    <div class="measmatic-tooltip-content measmatic-tooltip-content__bottom">Tooltip top-left</div>
</div>

Customiziation

  • position:string defines the position of the tooltip depending on parent element: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left, center
  • duration:number time in ms how long the tooltip will be displayed
  • delay:number time in ms needed to display the tooltip
  • label:string defines the text shown in the tooltip
  • hover:boolean defines if the tooltip will be shown by hovering over the parent element (default: true)

Functions

  • createToolTip(element, options) creates tooltip
  • options is a object and contains position:string, duration:number, delay:number, label:string, hover:boolean
  • pop() triggers tooltip (show and hide)
  • show() shows tooltip
  • hide() hides tooltip
<button onclick="this.tooltip.pop()">;

parent.tooltip.show();
parent.tooltip.hide();