Bootstrap 4 – Tooltips

Bootstrap cung cấp function tooltip để chú thích khi người dùng rê chuột lên 1 item nào đó.

Text hiển thị trong tooltiptitle của element.

Tooltip phù hợp với với element <a> và <button>.

Tooltip là thư viện thứ 3 (library Tether) nên bạn phải nhúng vào. Tuy nhiên nó cũng được bao gồm trong bộ bootstrap khi bạn nhúng bootstrap.js hay bootstrap.min.js như ví dụ bên dưới.

Khởi tạo

Tooltip theo mặc định chưa được bật, vì vậy để sử dụng, bạn cần khởi tạo nó.

Sử dụng mã sau bên dưới file jQuery.

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Tooltip cho Link

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>
</head>

<body>

  <div class="container">
    <p style="margin:40px;">Check out my <a target="_blank" href="#" data-toggle="tooltip" data-placement="top" title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you might need it!</p>
  </div>

</body>

</html>

Tooltips trên Buttons

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>
</head>

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="tooltip" title="Top shoes" style="margin:20px;">
      Shoes
    </button>
  </div>

</body>

</html>

Tooltip Position

Bạn có thể tùy chỉnh vị trí của Tooltip khi bật lên.

Bạn có thể chỉnh vị trí bật lên là top, bottom, left hoặc right.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>
</head>

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top shoes" style="margin:20px;">
      Shoes
    </button>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Right boot" style="margin:20px;">
      Boots
    </button>
    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Bottom uggs" style="margin:20px;">
      Ugg
    </button>
    <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Left sock" style="margin:20px;">
      Socks
    </button>
  </div>

</body>

</html>