Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="buddypress-wrap">

<h1>BP Tooltips Playground</h1>
<p>For: <a  href="https://buddypress.trac.wordpress.org/ticket/7188">BP Trac #7188</a></p>
<p>First pass - Pattern for accessible tooltips usable in all devices. 
  <ul>
    <li>Add a <em>bp-tooltip</em> class to the link or button</li>
    <li>Add a <em>span</em> within the link or button with a <em>bp-tooltip-text</em> class</li>
    <li>Add <em>aria-hidden="true"</em> to the <em>span</em> if additional info is redundant for screen readers. e.g. Name tooltip</li>
  </ul>
  
<h2>A. Icon Fonts in empty links </h2>
  
<a class="message-action bp-tooltip" data-status="star" data-star-nonce="fae1acf32e" data-message-id="6" href="#"><span class="icon" aria-hidden="true">&#xf006;</span><span class="bp-tooltip-text" role="tooltip">Star this message</span></a>
  
<a class="message-action bp-tooltip" data-status="heart" data-star-nonce="fae1acf32e" data-message-id="6" href="#"><span class="icon" aria-hidden="true">&#xf08a;</span> <span class="bp-tooltip-text" role="tooltip">I love this</span></a>
  
<a class="message-action bp-tooltip" data-status="comment" data-star-nonce="fae1acf32e" data-message-id="6" href="#""><span class="icon" aria-hidden="true">&#xf075;</span> <span class="bp-tooltip-text" role="tooltip">Add Comment</span></a>

<a class="message-action bp-tooltip" data-status="reply" data-star-nonce="fae1acf32e" data-message-id="6" href="#"><span class="icon" aria-hidden="true">&#xf112;</span> <span class="bp-tooltip-text" role="tooltip">Reply</span></a>
<a class="message-action bp-tooltip" data-status="remove" data-star-nonce="fae1acf32e" data-message-id="6" href="#"><span class="icon" aria-hidden="true">&#xf00d;</span> <span class="bp-tooltip-text" role="tooltip">Delete</span></a>

<h2>B. SVG Icons in empty links</h2>

<a class="svg-icon bp-tooltip" data-status="star" data-star-nonce="fae1acf32e" data-message-id="6" href="#">
<svg aria-hidden="true" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
<span class="bp-tooltip-text" role="tooltip">Star this message</span></a>

<a class="svg-icon bp-tooltip" data-status="heart" data-star-nonce="fae1acf32e" data-message-id="6" href="#">
<svg aria-hidden="true" id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />
</svg>
<span class="bp-tooltip-text" role="tooltip">I love this</span></a>

<a class="svg-icon bp-tooltip" data-status="comment" data-star-nonce="fae1acf32e" data-message-id="6" href="#">
<svg aria-hidden="true" id="i-msg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
</svg>
<span class="bp-tooltip-text" role="tooltip">Add Comment</span></a>

<a class="svg-icon bp-tooltip" data-status="reply" data-star-nonce="fae1acf32e" data-message-id="6" href="#">
<svg aria-hidden="true" id="i-reply" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />
</svg>
<span class="bp-tooltip-text" role="tooltip">Reply</span></a>

<a class="svg-icon bp-tooltip" data-status="delete" data-star-nonce="fae1acf32e" data-message-id="6" href="#">
<svg aria-hidden="true" id="i-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
<span class="bp-tooltip-text" role="tooltip">Delete this message</span></a>
  
<h2>C. SVG Icons in Buttons</h2>
                                            
<button class="bp-tooltip svg-icon" data-status="star" data-star-nonce="fae1acf32e" data-message-id="6">
<svg aria-hidden="true" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
<span class="bp-tooltip-text" role="tooltip">Star this message</span></button>

<button class="bp-tooltip svg-icon" data-status="heart" data-star-nonce="fae1acf32e" data-message-id="6">
<svg aria-hidden="true" id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />
</svg>
<span class="bp-tooltip-text" aria-hidden="true" role="tooltip">I love this</span></button>

<button class="bp-tooltip svg-icon" data-status="comment" data-star-nonce="fae1acf32e" data-message-id="6">
<svg aria-hidden="true" id="i-msg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
</svg>
<span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Add Comment</span></button>

<button class="bp-tooltip svg-icon" data-status="reply" data-star-nonce="fae1acf32e" data-message-id="6">
<svg aria-hidden="true" id="i-reply" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />
</svg>
<span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Reply</span></button>

<button class="bp-tooltip svg-icon" data-status="delete" data-star-nonce="fae1acf32e" data-message-id="6">
<svg aria-hidden="true" id="i-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%">
    <path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
<span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Delete this message</span></button>

<h2>D. Additional Text</h2>

<p>Link: Admin created the group BP Nouveau <a href="#link-to-page" class="bp-tooltip"><span class="time-since">1 week, 3 days ago<span class="bp-tooltip-text" role="tooltip">View Discussion</span></span></a></p>
<p>Link: <a href="#link-to-page" class="bp-tooltip rss">RSS<span class="bp-tooltip-text" role="tooltip">RSS Feed link</span></a></p>
<button type="button" class="bp-tooltip button confirm" href="#link-to-page" role="button">Delete<span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Delete Conversation</span></button>

<h2>E. Floated Avatars</h2>
<div class="avatar-block">
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/johnjamesjacoby" class="bp-tooltip"><img alt="Profile Photo of John James Jacoby" src="//www.gravatar.com/avatar/7a2644fb53ae2f7bfd7143b504af396c?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">John James Jacoby</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/boonebgorges" class="bp-tooltip"><img alt="Profile Photo of Boone B. Gorges" src="//www.gravatar.com/avatar/9cf7c4541a582729a5fc7ae484786c0c?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Boone B. Gorges</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/djpaul" class="bp-tooltip"><img alt="Profile Photo of Paul Gibbs" src="//www.gravatar.com/avatar/3bc9ab796299d67ce83dceb9554f75df?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Paul Gibbs</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/r-a-y" class="bp-tooltip"><img alt="Profile Photo of Ray" src="//www.gravatar.com/avatar/3bfa556a62b5bfac1012b6ba5f42ebfa?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Rayisme</span></a>
	</div>
	<div class="item-avatar">
		<a href="ttps://profiles.wordpress.org/imath" class="bp-tooltip"><img alt="Profile Photo of Mathieu Viet" src="//www.gravatar.com/avatar/8b208ca408dad63888253ee1800d6a03?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Mathieu Viet</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/mercime" class="bp-tooltip"><img alt="Profile Photo of Mercime" src="//www.gravatar.com/avatar/fae451be6708241627983570a1a1817a?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Mercime</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/dcavins" class="bp-tooltip"><img alt="Profile Photo of David Cavins" src="//www.gravatar.com/avatar/a5fa7e83d59cb45ebb616235a176595a?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">David Cavins</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/tw2113" class="bp-tooltip"><img alt="Profile Photo of Michael Beckwith" src="//www.gravatar.com/avatar/a5d7c934621fa1c025b83ee79bc62366?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Michael Beckwith</span></a>
	</div>
	<div class="item-avatar">
		<a href="https://profiles.wordpress.org/hnla" class="bp-tooltip"><img alt="Profile Photo of Hugo Ashmore" src="//www.gravatar.com/avatar/3860c955aa3f79f13b92826ae47d07fe?s=100"><span class="bp-tooltip-text" aria-hidden="true" role="tooltip">Hugo Ashmore</span></a>
	</div>
  
</div>
<div class="clear"></div>
<p> JS needed for mobile/touchscreens only. Tooltip shows up on touch start, but it does not disappear on touch end.</p>

</div><!-- .buddypress-wrap -->

            
          
!
            
              body {
  background-color: #eee;
  font-family: "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
}

.buddypress-wrap {
  background-color: #fafafa;
  margin: 3em auto;
  padding: 2em 4em;
  width: 500px;
}

h1  {
  color: #990099;
}

h2 {
  font-weight: normal;
  margin: 2em auto 1em;
}

.clear {
  clear: both;
  display: block;
  
}

a {
  color: #990099;
  text-decoration: none;
}

a span.time-since,
a.rss {
  text-decoration: underline;
}

a.message-action {
  height: 20px;
  margin-right: 30px;
  width: 20px;
}

.message-action .icon {
  font-family: FontAwesome;
}

.svg-icon {
  margin-bottom: 30px;
  margin-right: 30px;
}

.svg-icon svg {
  height: 15px;
  width: 15px;
}

button {
  background-color: #eee; 
  border: none;
  color: #000;
  padding: 7px 15px;
  text-align: center;
  text-decoration: none;
}

button:hover {
  background-color: #990099; 
  color: white;
}

.avatar-block {
  width: 400px;
}

.item-avatar {
  float: left;
  height: 100px;
  margin: 0 30px 30px 0;
  width: 100px;
}

.item-avatar img {
  border: 3px solid #555;
  border-radius: 50%;  
}

.bp-tooltip {
  position: relative;
  display: inline-block;
  text-decoration: none;
  /* outline: none; */
}

.bp-tooltip span.bp-tooltip-text {
  background-color: #fff; 
  border: 1px solid #ccc;
  border-radius: 2px; 
  bottom: -30px;
  color: #444;
  font-size: 12px;
  height: 1px;
  left: 0;
  max-width: 200px;
  opacity: 0;
  padding: 4px 8px;
  position: absolute;   
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
  text-align: center;
  visibility: hidden;
  width: 1px;
  white-space: nowrap;
  z-index: 999;
}

.bp-tooltip:hover {
  border: 0; /* IE fix */
}

.bp-tooltip:hover span.bp-tooltip-text,
.bp-tooltip:focus span.bp-tooltip-text {
  height: auto;
  width: auto;
  opacity: 1;
  transition: opacity 1s;
  visibility: visible;
  animation: fade 2s;
}

@keyframes fade {
  0% { bottom: -25px; }
  25% { bottom: -30px; }
  50% { bottom: -30px; }
  100% { bottom: -30px; }
}
  
.bp-tooltip span.bp-tooltip-text:before,
.bp-tooltip span.bp-tooltip-text:after {
  content: "";
  position: absolute;
  z-index: 1000;
}  

            
          
!
            
              
/* Progressive enhancement. JS for mobile touch only. Tooltip shows up on touch start, but does disappear on touch end. */



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console