• Components
  • Tooltip

Tooltip 

@jrmc.tooltip({ text: 'hello' })
  <img src="https://picsum.photos/64/64" />
@end
<div
  
  class="tooltip"
  data-tip="hello"
>
    <img src="https://picsum.photos/64/64" />
</div>

Tooltip open 

@jrmc.tooltip({ text: 'hello', class: 'tooltip-open' })
  <img src="https://picsum.photos/64/64" />
@end
<div
  
  class="tooltip tooltip-open"
  data-tip="hello"
>
    <img src="https://picsum.photos/64/64" />
</div>

Tooltip position 

@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-left tooltip-primary' })
  <img src="https://picsum.photos/64/64" />
@end
@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-bottom tooltip-secondary' })
  <img src="https://picsum.photos/64/64" />
@end
@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-right tooltip-accent' })
  <img src="https://picsum.photos/64/64" />
@end
<div
  
  class="tooltip tooltip-open tooltip-left tooltip-primary"
  data-tip="hello"
>
    <img src="https://picsum.photos/64/64" />
</div>
<div
  
  class="tooltip tooltip-open tooltip-bottom tooltip-secondary"
  data-tip="hello"
>
    <img src="https://picsum.photos/64/64" />
</div>
<div
  
  class="tooltip tooltip-open tooltip-right tooltip-accent"
  data-tip="hello"
>
    <img src="https://picsum.photos/64/64" />
</div>