Skip to content

+page.md

Latest commit

 

History

History
319 lines (270 loc) · 7.78 KB

+page.md

File metadata and controls

319 lines (270 loc) · 7.78 KB
title desc source layout classnames
Tooltip
Tooltip can be used to show a message when hovering over an element.
components
component part placement modifier color
class desc
tooltip
Container element
class desc
tooltip-content
Optional. Setting a div as the content of the tooltip instead of the `data-tip` text
class desc default
tooltip-top
Put tooltip on top
true
class desc
tooltip-bottom
Put tooltip on bottom
class desc
tooltip-left
Put tooltip on left
class desc
tooltip-right
Put tooltip on right
class desc
tooltip-start
Align tooltip on start
class desc
tooltip-center
Align tooltip on center
class desc
tooltip-end
Align tooltip on end
class desc
tooltip-open
Force open tooltip
class desc
tooltip-neutral
neutral color
class desc
tooltip-primary
primary color
class desc
tooltip-secondary
secondary color
class desc
tooltip-accent
accent color
class desc
tooltip-info
info color
class desc
tooltip-success
success color
class desc
tooltip-warning
warning color
class desc
tooltip-error
error color
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~Tooltip

Hover me 
<div class="$$tooltip" data-tip="hello">
  <button class="$$btn">Hover me</button>
</div>

~Tooltip with tooltip-content

Wow!
Hover me 
<div class="$$tooltip">
  <div class="$$tooltip-content">
    <div class="animate-bounce text-orange-400 -rotate-10 text-2xl font-black">Wow!</div>
  </div>
  <button class="$$btn">Hover me</button>
</div>

~Force open

Force open 
<div class="$$tooltip $$tooltip-open" data-tip="hello">
  <button class="$$btn">Force open</button>
</div>

~Top

Top
Top
Top 
<div class="$$tooltip $$tooltip-open $$tooltip-top" data-tip="hello">
  <button class="$$btn">Top</button>
</div>

~Bottom

Bottom
Bottom
Bottom 
<div class="$$tooltip $$tooltip-open $$tooltip-bottom" data-tip="hello">
  <button class="$$btn">Bottom</button>
</div>

~Left

Left
Left
Left 
<div class="$$tooltip $$tooltip-open $$tooltip-left" data-tip="hello">
  <button class="$$btn">Left</button>
</div>

~Right

Right
Right
Right 
<div class="$$tooltip $$tooltip-open $$tooltip-right" data-tip="hello">
  <button class="$$btn">Right</button>
</div>

~Neutral color

neutral 
<div class="$$tooltip $$tooltip-open $$tooltip-neutral" data-tip="neutral">
  <button class="$$btn $$btn-neutral">neutral</button>
</div>

~Primary color

primary 
<div class="$$tooltip $$tooltip-open $$tooltip-primary" data-tip="primary">
  <button class="$$btn $$btn-primary">primary</button>
</div>

~Secondary color

secondary 
<div class="$$tooltip $$tooltip-open $$tooltip-secondary" data-tip="secondary">
  <button class="$$btn $$btn-secondary">secondary</button>
</div>

~Accent color

accent 
<div class="$$tooltip $$tooltip-open $$tooltip-accent" data-tip="accent">
  <button class="$$btn $$btn-accent">accent</button>
</div>

~Info color

info 
<div class="$$tooltip $$tooltip-open $$tooltip-info" data-tip="info">
  <button class="$$btn $$btn-info">info</button>
</div>

~Success color

success 
<div class="$$tooltip $$tooltip-open $$tooltip-success" data-tip="success">
  <button class="$$btn $$btn-success">success</button>
</div>

~Warning color

warning 
<div class="$$tooltip $$tooltip-open $$tooltip-warning" data-tip="warning">
  <button class="$$btn $$btn-warning">warning</button>
</div>

~Error color

error 
<div class="$$tooltip $$tooltip-open $$tooltip-error" data-tip="error">
  <button class="$$btn $$btn-error">error</button>
</div>

~Responsive tooltip. only show for large screen

Hover me 
<div class="$$lg:tooltip" data-tip="hello">
  <button class="$$btn">Hover me</button>
</div>

~Responsive tooltip position

Hover me 
<div class="$$tooltip $$tooltip-start $$md:tooltip-right $$md:tooltip-center" data-tip="hello">
  <button class="$$btn">Hover me</button>
</div>