
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/tooltip/index.mdx'

## 默认类名表格
  
<CssTable name="tooltip" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.tooltip {
  @apply relative inline-block;
  --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
}

.tooltip:before {
  @apply absolute;
  pointer-events: none;
  z-index: 1;
  content: var(--tw-content);
  --tw-content: attr(data-tip);
}

.tooltip:before,
.tooltip-top:before {
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-offset);
}

.tooltip-bottom:before {
  transform: translateX(-50%);
  top: var(--tooltip-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.tooltip-left:before {
  transform: translateY(-50%);
  top: 50%;
  left: auto;
  right: var(--tooltip-offset);
  bottom: auto;
}

.tooltip-right:before {
  transform: translateY(-50%);
  top: 50%;
  left: var(--tooltip-offset);
  right: auto;
  bottom: auto;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.tooltip {
  @apply relative inline-block text-center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: theme(colors.neutral);
  --tooltip-text-color: theme(colors.neutral-content);
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}
.tooltip-primary {
  --tooltip-color: theme(colors.primary);
  --tooltip-text-color: theme(colors.primary-content);
}
.tooltip-success {
  --tooltip-color: theme(colors.success);
  --tooltip-text-color: theme(colors.success-content);
}
.tooltip-warning {
  --tooltip-color: theme(colors.warning);
  --tooltip-text-color: theme(colors.warning-content);
}
.tooltip-error {
  --tooltip-color: theme(colors.error);
  --tooltip-text-color: theme(colors.error-content);
}
.tooltip-neutral {
  --tooltip-color: theme(colors.neutral);
  --tooltip-text-color: theme(colors.neutral-content);
}

.tooltip:before,
.tooltip:after {
  @apply opacity-0 transition delay-100 duration-200 ease-in-out;
}

.tooltip:after {
  @apply absolute;
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
  position: absolute;
}

.tooltip:before {
  @apply max-w-xs rounded px-2 py-1 text-sm;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: max-content;
}

.tooltip.tooltip-open:before,
.tooltip.tooltip-open:after,
.tooltip:hover:before,
.tooltip:hover:after {
  @apply opacity-100 delay-75;
}

.tooltip:has(:focus-visible):after,
.tooltip:has(:focus-visible):before {
  @apply opacity-100 delay-75;
}

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

.tooltip:after,
.tooltip-top:after {
  transform: translateX(-50%);
  border-color: var(--tooltip-color) transparent transparent transparent;
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-tail-offset);
}

.tooltip-bottom:after {
  transform: translateX(-50%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.tooltip-left:after {
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--tooltip-color);
  top: 50%;
  left: auto;
  right: calc(var(--tooltip-tail-offset) + 0.0625rem);
  bottom: auto;
}

.tooltip-right:after {
  transform: translateY(-50%);
  border-color: transparent var(--tooltip-color) transparent transparent;
  top: 50%;
  left: calc(var(--tooltip-tail-offset) + 0.0625rem);
  right: auto;
  bottom: auto;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



