Tooltip - Popover
Colocar uma classe tooltip em torno de um elemento pai e acrescentar um elemento filho com a classe tooltip-content, juntamente com o seu conteúdo textual.
Para o popover, deve ser colocado um data-popover no elemento que irá ativar o recurso e um data-popover="content" no elemento seguinte, para ativar o mesmo. No popover pode ser adicionado elementos do html, como texto, imagens, vídeos, links e outros.
Ducimus numquam eligendi rem eaque quisquam dignissimos quidem dolorum assumenda explicabo molestias quibusdam labore asperiores eius incidunt, earum fugiat harum sequi quia.VoluptatumLorem ipsum dolor sit amet consectetur adipisicing elit. sequi perferendis molestias architecto distinctio laboriosam rerum. Veniam consectetur dolorem impedit nesciunt commodi ea!Asperiores repellat aliquam sit provident eveniet ullam culpa. Deserunt quasi dolor ea saepe iusto nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Non explicabo architecto consectetur quas maiores tempore, quisquam odio commodi.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates amet quod, eaque corporis repudiandae dicta assumenda, error autem quisquam ipsum vero aliquid tempora consectetur consequuntur totam deserunt magni provident a.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa distinctio non accusantium reiciendis maxime, fugiat soluta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa distinctio non accusantium reiciendis maxime, fugiat soluta! Rerum perspiciatis Lorem ipsum dolor sit sed aperiam odio sunt omnis, expedita asperiores rem quod eveniet labore obcaecati?.
HTML Exemplo
<h3>Tooltip</h3>
<p>
<span class=tooltip>Voluptatum
<span class="tooltip-content">Lorem ipsum dolor sit amet consectetur</span>
</span>
</p>
<h3>Popover</h3>
<div class="popover btn-inline">
<button class="btn-popover" data-popover="open">Abrir Popover</button>
<div class="popover-content" data-popover="content">
<p class="main-content__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo laudantium
repudiandae dolores ratione, pariatur qui cum sed cupiditate doloribus.</p>
<ul>
<li><a href="http://leandrofialho.com/" target="_blank">item 1</a> </li>
<li>item 2</li>
<li>item 3</li>
<li data-smooth><a href="#init" target="_blank">item 4</a> </li>
</ul>
</div>
</div>