NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Rondleiding met hotspots New

Short tour through a customer portal: four softly pulsing hotspots, an explanation per step with back, next, skip and Esc, a spotlight on the element and focus that stays inside the explanation and returns afterwards. Click a single hotspot to see just that tip. Positions are calculated from the real elements, so it also works on mobile. Pulsing stops with reduced motion. In production you store which tips someone has seen in localStorage or the profile.

Openstaand€ 4.280,006 facturen, 1 te laat
Btw-aangifte Q3€ 1.932,40indienen voor 31 okt

How to use it

  1. Paste the HTML where the components should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Rondleiding met hotspots · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ptr">
  <div class="ptr__app">
    <div class="ptr__side" role="navigation" aria-label="Menu (demo)">
      <span class="ptr__brand">Kasboek</span>
      <a href="#" aria-current="page">Overzicht</a><a href="#">Facturen</a><a href="#" data-tip="3">Uitgaven</a><a href="#">Btw</a>
    </div>
    <div class="ptr__main">
      <div class="ptr__top">
        <label class="ptr__search" data-tip="1"><span class="ptr__sr">Zoeken</span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Zoek klant of factuur"></label>
        <button type="button" class="ptr__new" data-tip="0">Nieuwe factuur</button>
      </div>
      <div class="ptr__cards">
        <div class="ptr__card"><span>Openstaand</span><b>€ 4.280,00</b><small>6 facturen, 1 te laat</small></div>
        <div class="ptr__card" data-tip="2"><span>Btw-aangifte Q3</span><b>€ 1.932,40</b><small>indienen voor 31 okt</small></div>
      </div>
    </div>
  </div>
  <div class="ptr__dots"></div>
  <button type="button" class="ptr__start">Rondleiding starten</button>
  <div class="ptr__ring" hidden></div>
  <div class="ptr__pop" role="dialog" aria-labelledby="ptr-t" aria-describedby="ptr-d" hidden>
    <p class="ptr__count"></p>
    <h4 class="ptr__t" id="ptr-t" tabindex="-1"></h4>
    <p class="ptr__d" id="ptr-d"></p>
    <div class="ptr__btns">
      <button type="button" class="ptr__skip">Overslaan</button>
      <button type="button" class="ptr__b" data-d="-1">Terug</button>
      <button type="button" class="ptr__b ptr__b--main" data-d="1">Volgende</button>
    </div>
  </div>
  <p class="ptr__sr" aria-live="polite"></p>
</div>
</div>

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →