Bulma Tooltip é uma extensão para Bulma.io em CSS puro que traz a capacidade de exibir facilmente um tooltip a qualquer tipo de elemento, em diferentes posições.
Existem várias maneiras de começar a usar o Bulma Tooltip.
npm install bulma-v1-tooltip
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-v1-tooltip/dist/bulma-v1-tooltip.min.css">
As dicas de ferramentas são exibidas em uma pequena caixa cinza na parte superior do elemento. Tudo o que você precisa fazer é adicionar o atributo data-tooltip com o texto que deseja exibir como valor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos..
<p>
Lorem ipsum dolor sit amet, <span data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio
ducimus non dignissimos..
</p>
Tooltip pode ser usado em qualquer tipo de elemento HTML que suporte conjunto de dados.
<button class="button" data-tooltip="Tooltip content">Button</button>
Para fins de design, você pode exibir uma seta no tooltip adicionando a classe has-tooltip-arrow no elemento
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.
<p>
Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores
earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.
</p>
A posição do tooltip pode ser alterado adicionando uma das seguintes classes ao elemento HTML que contém a dica de ferramenta: has-tooltip-right, has-tooltip-bottom, has-tooltip-left.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.
<p>
Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" data-tooltip="Tooltip content on top">consectetur adipisicing elit</span>. Ipsa fugit
<span class="has-tooltip-arrow has-tooltip-right" data-tooltip="Right tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos
<span class="has-tooltip-arrow has-tooltip-bottom" data-tooltip="Bottom tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit
beatae <span class="has-tooltip-arrow has-tooltip-left" data-tooltip="Left tooltip content">veritatis</span> nemo veniam error, hic cumque.
</p>
Exiba o conteúdo longo no tooltip adicionando a classe has-tooltip-multiline ao elemento.
Você pode alterar o alinhamento do texto adicionando o modificador has-tooltip-text-left, has-tooltip-text-centered ou has-tooltip-text-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p>
Lorem ipsum dolor sit amet,
<span
class="has-tooltip-arrow has-tooltip-multiline has-tooltip-text-centered"
data-tooltip="Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque."
>consectetur adipisicing elit</span>
</p>
o tooltip oferece suporte ao modificador de cores adicionando uma das seguintes classes ao elemento HTML que contém o tooltip: has-tooltip-info, has-tooltip-warning, has-tooltip-primary, has-tooltip-success, has-tooltip-danger.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.
<p>
Lorem ipsum <span class="has-tooltip-arrow has-tooltip-info" data-tooltip="Info tooltip content">dolor</span> sit amet,
<span class="has-tooltip-arrow has-tooltip-warning" data-tooltip="Warning tooltip content">consectetur adipisicing elit</span>. Ipsa fugit
<span class="has-tooltip-arrow has-tooltip-right has-tooltip-success" data-tooltip="Success tooltip content">dolores</span> earum quod distinctio
ducimus non dignissimos
<span class="has-tooltip-arrow has-tooltip-bottom has-tooltip-primary" data-tooltip="Primary tooltip content">molestias</span> amet corrupti
voluptatum assumenda impedit beatae
<span class="has-tooltip-arrow has-tooltip-left has-tooltip-danger" data-tooltip="Danger tooltip content">veritatis</span> nemo veniam error, hic
cumque.
</p>
Você pode definir o tooltip para estar sempre visível adicionando a classe has-tooltip-active no elemento.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos.
<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-active" data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos.
</p>
A posição do tooltipo pode ser baseada em breakponts responsivos adicionando uma das seguintes classes ao elemento HTML que contém o tooltip:
has-tooltip-#{$direction}-mobilehas-tooltip-#{$direction}-tablethas-tooltip-#{$direction}-tablet-onlyhas-tooltip-#{$direction}-touchhas-tooltip-#{$direction}-desktophas-tooltip-#{$direction}-desktop-onlyhas-tooltip-#{$direction}-until-widescreenhas-tooltip-#{$direction}-widescreenhas-tooltip-#{$direction}-widescreen-onlyhas-tooltip-#{$direction}-until-fullhdhas-tooltip-#{$direction}-fullhdNão se esqueça de substituir #${direction} por uma das direções disponíveis: top, right, bottom, left.
has-tooltip-text-#{$direction}-mobilehas-tooltip-text-#{$direction}-tablethas-tooltip-text-#{$direction}-tablet-onlyhas-tooltip-text-#{$direction}-touchhas-tooltip-text-#{$direction}-desktophas-tooltip-text-#{$direction}-desktop-onlyhas-tooltip-text-#{$direction}-until-widescreenhas-tooltip-text-#{$direction}-widescreenhas-tooltip-text-#{$direction}-widescreen-onlyhas-tooltip-text-#{$direction}-until-fullhdhas-tooltip-text-#{$direction}-fullhdNão se esqueça de substituir #${direction} por uma das direções disponíveis: top, right, bottom, left.
| Class | Mobile | Tablet | Desktop | Widescreen | FullHD |
|---|---|---|---|---|---|
| has-tooltip-hidden-mobile | hidden | visible | visible | visible | visible |
| has-tooltip-hidden-tablet-only | visible | hidden | visible | visible | visible |
| has-tooltip-hidden-desktop-only | visible | visible | hidden | visible | visible |
| has-tooltip-hidden-widescreen-only | visible | visible | visible | hidden | visible |
| has-tooltip-hidden-touch | hidden | hidden | visible | visible | visible |
| has-tooltip-hidden-tablet | visible | hidden | hidden | hidden | hidden |
| has-tooltip-hidden-desktop | visible | visible | hidden | hidden | hidden |
| has-tooltip-hidden-widescreen | visible | visible | visible | hidden | hidden |
| has-tooltip-hidden-fullhd | visible | visible | visible | visible | hidden |