Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>Scroll down to badge, this is just filler..  Click or hover the badges to display tooltip.  Click is what will work on mobile, either will work on desktop.</p>
<p>It all started when our over-heralded star, Nobody, woke up in a haunted thicket. It was the second time it had happened. Feeling scarcely concerned, Nobody groped a wolverine, thinking it would make him feel better (but as usual, it did not). A few minutes later, he realized that his beloved Something was missing!  Immediately he called his favorite hooker, Somebody. Nobody had known Somebody for (plus or minus) 0 years but a few days at least, the majority of which were exotic ones.  Somebody was unique. She was outgoing though sometimes a little... funny-smelling. Nobody called her anyway, for the situation was urgent.</p>
<p>Somebody picked up to a very sad Nobody. Somebody calmly assured him that most venomous koalas panic before mating, yet albino cats usually earnestly yawn *after* mating. She had no idea what that meant; she was only concerned with distracting Nobody.  Why was Somebody trying to distract Nobody?  Because she had snuck out from Nobody's with the Something only seven days prior.  It was a sassy little Something... how could she resist?</p>

<p>It didn't take long before Nobody got back to the subject at hand: his Something. Somebody grimaced. Relunctantly, Somebody invited him over, assuring him they'd find the Something. Nobody grabbed his whale and disembarked immediately. After hanging up the phone, Somebody realized that she was in trouble. She had to find a place to hide the Something and she had to do it carefully. She figured that if Nobody took the nappy, busted-out hatchback, she had take at least eight minutes before Nobody would get there.  But if he took the Prius?  Then Somebody would be very screwed.</p>
<div class="badge" style="float:right;margin-right:20px;">
  <div id="trigger" class="logo">
    <a href="#open1">&nbsp;</a>
  </div>
  <div id="open1" class="dialog">
    <a href="#close" title="Close" class="close box"></a>
      <h2>Tooltip</h2>

      <p>Click this tooltip to dismiss.</p>
      
  </div>
</div>

<p>Before she could come up with any reasonable ideas, Somebody was interrupted by ten pestering Irkles that were lured by her Something. Somebody cringed; 'Not again', she thought. Feeling angered, she aimlessly reached for her banana and fearlessly poked every last one of them. Apparently this was an adequate deterrent--the discouraged critters began to scurry back toward the lemur-infested moor, squealing with discontent. She exhaled with relief.  That's when she heard the Prius rolling up.  It was Nobody.</p>

<p>As he pulled up, he felt a sense of urgency. He had had to make an unscheduled stop at The Salvation Army to pick up a 12-pack of ripened avocados, so he knew he was running late.  With a apt leap, Nobody was out of the Prius and went charismatically jaunting toward Somebody's front door.  Meanwhile inside,  Somebody was panicking.  Not thinking, she tossed the something into a box of live hand grenades and then slid the box behind her canoe. Somebody was puzzled but at least the something was concealed.  The doorbell rang.</p>

<p>'Come in,' Somebody flamboyantly purred.  With a hasty push, Nobody opened the door.  'Sorry for being late, but I was being chased by some clueless self-righteous ass in a rice rocket,' he lied.  'It's fine,' Somebody assured him. Nobody took a seat just under where Somebody had hidden the something. Somebody turned red trying unsuccessfully to hide her nervousness.  'Uhh, can I get you anything?' she blurted.  But Nobody was distracted. Heart filled with earnest fortitude, Somebody noticed a selfish look on Nobody's face. Nobody slowly opened his mouth to speak.</p>

<p>'...What's that smell?'</p>

<p>Somebody felt a stabbing pain in her ear when Nobody asked this.  In a moment of disbelief, she realized that she had hidden the something right by her oscillating fan. 'Wh-what?  I don't smell anything..!'  A lie.  A funny-smelling look started to form on Nobody's face. He turned to notice a box that seemed clearly out of place. 'Th-th-those are just my grandma's dangerous oil-soaked rags from when she used to have pet venomous koalas.  She, uh...dropped 'em by here earlier'. Nobody nodded with fake acknowledgement...then, before Somebody could react, Nobody aggressively lunged toward the box and opened it.  The something was plainly in view.</p>

<p>Nobody stared at Somebody for what what must've been eight microseconds. A few unfulfilled decades later, Somebody groped wildly in Nobody's direction, clearly desperate. Nobody grabbed the something and bolted for the door.  It was locked. Somebody let out a flamboyant chuckle. 'If only you hadn't been so protective of that thing, none of this would have happened, Nobody,' she rebuked. Somebody always had been a little insensitive, so Nobody knew that reconciliation was not an option; he needed to escape before Somebody did something crazy, like... start chucking bananas at her or something. Unaware of the bleakness of existence, he gripped his something tightly and made a dash toward the window, diving headlong through the glass panels.</p>

<p>Somebody looked on, blankly. 'What the hell?  That seemed excessive.  The other door was open, you know.' Silence from Nobody. 'And to think, I varnished that window frame eight days ago...it never ends!' Suddenly she felt a tinge of concern for Nobody. 'Oh.  You ..okay?' Still silence. Somebody walked over to the window and looked down. Nobody was gone.</p>
<div class="badge" style="float:left;margin-left:20px;">
  <div id="trigger" class="logo">
    <a href="#open2">&nbsp;</a>
  </div>
  <div id="open2" class="dialog">
    <a href="#close" title="Close" class="close button">&#x2715;</a>
      <h2>Info Box</h2>

      <p>This is a sample modal.</p>
      <p>It is completely responsive and uses no javascript at all.</p>
      <p>It will work on hover for desktop and click for mobile.</p>
  </div>
</div>

<p>Just yonder, Nobody was struggling to make his way through the lemur-infested moor behind Somebody's place. Nobody had severely hurt his shin during the window incident, and was starting to lose strength.  Another pack of feral Irkles suddenly appeared, having caught wind of the something.  One by one they latched on to Nobody.  Already weakened from his injury, Nobody yielded to the furry onslaught and collapsed.  The last thing he saw before losing consciousness was a buzzing horde of Irkles running off with his something.</p>

<p>But then Service Provider came down from the clouds on a puff of smoke and restored Nobody's something. Feeling worried, Service Provider smote the Irkles for their injustice.  Then He twinkled his nose and farted and was gone as quickly as He had appeared.  Somebody and Nobody were joyful but smelt only of burnt bacon for several days.  His something was safe. It was a good thing, too, because in three minutes his favorite TV show,  Two and a Half Men, was going to come on (followed immediately by 'When 3-legged wallabies meet ebola'). And so, everyone except Somebody and a few malaria-toting disease-carrying chipmunks lived blissfully happy, forever after.</p>
<center>
  <div class="badge">
  <div id="trigger" class="logo">
    <a href="#open3">&nbsp;</a>
  </div>
  <div id="open3" class="dialog">
    <a href="#close" title="Close" class="close button">&#x2715;</a>
      <h2>Info Box</h2>
      <p>This is a sample modal.</p>
      <p>It is completely responsive and uses no javascript at all.</p>
      <p>It will work on hover for desktop and click for mobile.</p>
  </div>
</div>
</center>
              
            
!

CSS

              
                .badge {
  position: relative;
  width: 300px;
  cursor: pointer;
  text-align: center;
  user-select: none;
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased
}
.logo {
  background-image: url('data:image/gif;base64,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');
  width: 200px;
  height: 200px;
  cursor: pointer;
  display: block;
  margin: 0 auto
}
#trigger a {
  display:block;
  height:100%;
  width:100%;
}
.dialog {
    background: #fff;
  bottom: 100%;
  color: #666;
  display: block;
  left: -25px;
  opacity: 0;
  padding: 25px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  transform: translateY(10px);
  transition: all .25s ease-out;
}
#trigger:hover ~ .dialog,
#trigger:hover + .dialog
#trigger:active ~ .dialog,
#trigger:active + .dialog {
  opacity: 1;
}
.dialog:target {
    opacity:1;
    pointer-events: auto;
}

.close.button {
  color: #666;
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 15px;
  text-decoration: none;
}


.close.box {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color: inherit;
  text-decoration:none; 
}
              
            
!

JS

              
                // none
              
            
!
999px

Console