Cara pasang Component Tooltip di Bootstrap 4

Halo teman teman jumpa lagi dengan tips dan trik di Dumetschool, kali ini kita akan belajar Component pada Bootstrap 4, tentunya di bootstrap 4 banyak sekali component component baru setelah upgrade sebelumnya dari bootstrap 3, oke langsung saja, kita akan belajar Cara Pasang Component Tooltip di Bootstrap 4.

kalian siap kan text editor dan ketikan template dasar dari Bootstrap di bawah ini. dan simpan dengan nama index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Tooltip</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    

 </body>
</html>

sebelum tag penutup body ketikan kode script di bawah ini

ada empat macam tooltip, tooltip atas, tooltip bawah, tooltip kiri, tooltip kanan, diantara tag body ketikan kode html atau class berikut

sebelum itu kita buat class container, class row dan class col-12 dulu yah

<div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="col-12 display-1 text-center text-info">Tooltip</h2>
        
      </div>
    </div>
 </div>

setelah tag h2 ketikan kode HTMl berikut:

Tooltip Top atau Tooltip Atas

<h3 class="display-4">Tooltip Top</h3>
    <blockquote class="blockquote">
        <p>Lorem <a href=""><span class="text-success" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod" data-placement="top">ipsum dolor sit amet</span></a> consectetur adipisicing elit. Rem distinctio quo nesciunt, optio quaerat cupiditate, molestias, dicta facilis atque consequatur reiciendis, temporibus illo porro culpa architecto quibusdam provident vitae ducimus.</p>
    </blockquote>

hasilnya seperti berikut:

Tooltip Right atau Tooltip Kanan

<h3 class="display-4 text-right">Tooltip Right</h3>
<blockquote class="blockquote  blockquote-reverse">
  <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="text-danger" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 " data-placement="right">Assumenda deleniti reiciendis</span> fugit sunt id laborum eos at. Nam quod ipsum molestias ratione eos optio. Ipsam dolores dolore ducimus, facere provident.</p>
</blockquote>

Hasilnya seperti berikut:

Tooltip Left atau Tooltip Kiri

<h3 class="display-4">Tooltip Left</h3>
<blockquote class="blockquote">
    <p>Lorem <a href=""><span class="text-success" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod" data-placement="left">ipsum dolor sit amet</span></a> consectetur adipisicing elit. Rem distinctio quo nesciunt, optio quaerat cupiditate, molestias, dicta facilis atque consequatur reiciendis, temporibus illo porro culpa architecto quibusdam provident vitae ducimus.</p>
</blockquote>

Hasilnya seperti berikut:

Tooltip Bottom atau Tooltip Bawah

 <h3 class="display-4 text-right">Tooltip Bottom</h3>
<blockquote class="blockquote">
    <p>Lorem <a href=""><span class="text-success" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod" data-placement="bottom">ipsum dolor sit amet</span></a> consectetur adipisicing elit. Rem distinctio quo nesciunt, optio quaerat cupiditate, molestias, dicta facilis atque consequatur reiciendis, temporibus illo porro culpa architecto quibusdam provident vitae ducimus.</p>
</blockquote>

hasilnyas seperti di bawah ini:

sekian tutorial Cara pasang Component Tooltip di Bootstrap 4, semoga bermanfaat yah 😀

Cara pasang Component Tooltip di Bootstrap 4

Kategori