Skip to content

Tooltip

Example#

preview

Code-example#

<measmatic-grid>

  <div class=row style=display:flex;justify-content:space-between>
    <button style="align-self:flex-start;margin:8px;border:2px solid #1976d2;background:#fff;padding:8px 16px">Top-Edge (top→bottom)
      <measmatic-tooltip label=top→bottom position=top></measmatic-tooltip>
    </button>
    <button style="align-self:flex-start;margin:8px;border:2px solid #388e3c;background:#fff;padding:8px 16px">Bottom-Edge (bottom→top)
      <measmatic-tooltip label=bottom→top position=bottom></measmatic-tooltip>
    </button>
  </div>
  <div class=row style=display:flex;justify-content:space-between>
    <button style="align-self:flex-end;margin:8px;border:2px solid #d32f2f;background:#fff;padding:8px 16px">Left-Edge (left→right)
      <measmatic-tooltip label=left→right position=left></measmatic-tooltip>
    </button>
    <button style="align-self:flex-end;margin:8px;border:2px solid #fbc02d;background:#fff;padding:8px 16px">Right-Edge (right→left)
      <measmatic-tooltip label=right→left position=right></measmatic-tooltip>
    </button>
  </div>
</measmatic-grid>
<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 preferred position of the tooltip depending on parent element: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left, center. The tooltip can flip automatically when the preferred position would overflow the viewport.
  • 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();