JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="section">
  <a href="#" data-tooltip="I'm a link.">
    This is a link.
  </a>
  <button data-tooltip="I'm a button.">
    This is a button
  </button>
  <div data-tooltip="I'm a div" style="width:200px">
    This is a div
  </div>
</div>

<div class="section">
  <a href="#" self-help>
    This is a link.
    <tooltip>
      <div>
        我是一个链接<br/>
        <img style="width:80px;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
        我是一个链接
      </div>
    </tooltip>
  </a>
  <button self-help>
    This is a button
    <tooltip>
      <div>
        我是一个按钮<br/>
        我是一个按钮
      </div>
    </tooltip>
  </button>
  <div self-help>
    This is a div
    <tooltip>
      <div>
        我是一个div<br/>
        我是一个div<br/>
      </div>
    </tooltip>
  </div>
</div>

SCSS

body{
	padding:50px;
  font-size:18px;
}
.section{
  margin-bottom:10px;
}

@mixin arrow {
  border-top: 8px solid hsla(0,0%,0%,.85);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: "";	
  height: 0;
  width: 0;
  left: 25%;	
}

@mixin tooltipBox {
  background: hsla(0,0%,0%,.85);
  color: #f6f6f6;
  content: attr(data-tooltip);
  font-family: sans-serif;
  font-size: 14px;	
  left: 0;
  line-height: 32px;
  padding: 0 15px;
  text-shadow: 0 1px 1px hsla(0,0%,0%,1);
  white-space: nowrap;	
  border-radius: 5px;
}

//---------------------------------------------

[data-tooltip], [self-help] {
  position:relative;
  &:before, &:after, tooltip{
    position: absolute;
    display: none;
  }
  &:before, tooltip {	
    @include tooltipBox;
  }
  &:after {	
    @include arrow;
  }
  &:hover{
    &:before, &:after, tooltip{
      display: inline-block;
      max-width: 500px;
    }
    &:before, tooltip {	
      bottom: calc(100% + 9px);
    }
    &:after {	
      top: -9px;
      left: 30px;
    }
  }
}