jBox with hyperlink

jBox tooltip with hyperlink to external domain

by zircon

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css">
<main class="container">
<h2>Tooltip</h2>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<h2>Tooltip Click</h2>
  <div class="targets-wrapper">
    <div id="Tooltip-7" class="target-click" data-jbox-title="Web link to NOAA weather" data-jbox-content="<a href='https://www.weather.gov/pqr/' target='_blank'>NOAA</a>">Click position</div>
    <div id="Tooltip-8" class="target-click">Click scroll</div>
  </div>

  <h2>Modal Click</h2>
  <div class="targets-wrapper">
    <div id="Modal-1" class="target-click" data-jbox-title="Web link to NOAA weather" data-jbox-content="<a href='https://www.weather.gov/pqr/' target='_blank'>NOAA</a>">Click modal</div>
    <div id="Modal-2" class="target-click">Click drag</div>
  </div>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
<p>words</p>
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: arial, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  color: #222;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
  outline: none;
  box-sizing: border-box;
}

p {
  margin: 0 0 15px;
}

p:last-child {
  margin-bottom: 0;
}

h2 {
  margin: 0;
  font-size: 22px;
  font-weight: normal;
}

main {
  padding: 20px 0;
}

.container {
  position: relative;
  width: calc(100% - 60px);
  max-width: 1000px;
  margin: auto;
}

@media (max-width: 768px) {
  .container {
    width: calc(100% - 30px);
  }
}

/* Target elements */

.targets-wrapper {
  margin: 0 -5px;
  padding: 10px 0 20px;
  display: flex;
  flex-wrap: wrap;
}

.target,
.target-click,
.target-notice {
  cursor: default;
  font-size: 14px;
  line-height: 50px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e2e2e2;
  background: #fafafa;
  text-align: center;
  font-weight: 500;
  position: relative;
  text-transform: uppercase;
  width: calc(25% - 10px);
  margin: 5px;
  transition: border-color .2s, background-color .2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.target:hover,
.target-click:hover,
.target-notice:hover {
  border-color: #bbb;
  background-color: #eee;
}

.target-click,
.target-notice {
  cursor: pointer;
}

.target.active,
.target-click.active,
.target-notice.active {
  color: #49d;
}

@media (max-width: 768px) {

  .target,
  .target-click,
  .target-notice {
    width: calc(50% - 10px);
  }
}

.demo-img {
  width: calc(25% - 10px);
  margin: 5px;
}

@media (max-width: 500px) {
  .demo-img {
    width: calc(50% - 10px);
  }
}

.demo-img>img {
  border: 4px solid #e2e2e2;
  border-radius: 4px;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: filter...

JavaScript

jQuery(function () {
  // Tooltip

  new jBox('Tooltip', {
    attach: '#Tooltip-7',
    target: '#Tooltip-7',
    theme: 'TooltipBorder',
    trigger: 'click',
    adjustTracker: true,
    closeOnClick: 'body',
    closeButton: 'box',
    animation: 'move',
    position: {
      x: 'left',
      y: 'top'
    },
    outside: 'y',
    pointer: 'left:20',
    offset: {
      x: 25
    },
    getTitle: 'data-jbox-title',
    getContent: 'data-jbox-content',

    onOpen: function () {
      this.source.addClass('active').html('Now scroll');
    },
    onClose: function () {
      this.source.removeClass('active').html('Click me');
    }
  });

  new jBox('Tooltip', {
    attach: '#Tooltip-8',
    theme: 'TooltipBorder',
    trigger: 'click',
    width: 200,
    height: jQuery(window).height() - 160,
    adjustTracker: true,
    closeOnClick: 'body',
    closeOnEsc: true,
    animation: 'move',
    position: {
      x: 'right',
      y: 'center'
    },
    outside: 'x',
    content:
      'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',
    onOpen: function () {
      this.source.addClass('active').html('Now scroll');
    },
    onClose: function () {
      this.source.removeClass('active').html('Click me');
    }
  });

  // Modal

  new jBox('Modal', {
    attach: '#Modal-1',
    height: 200,
    getTitle: 'data-jbox-title',
    getContent: 'data-jbox-content',
  });


  new jBox('Modal', {
    attach: '#Modal-2',
    width: 350,
    height: 200,
    blockScroll: false,
    animation: 'zoomIn',
    draggable: 'title',
    closeButton: true,
    content: 'You can move this modal window',
    title: 'Click here to drag me around',
    overlay: false,
    reposition: false,
    repositionOnOpen: false
  });
});