Segitiga kecil di tooltip

Tooltip seperti makanan buatan sendiri: setiap orang menggunakannya, dan setiap orang memiliki resep sendiri untuk membuatnya. Jika Anda tidak ingat resep tertentu, Anda akan mencarinya, mengikutinya, dan melanjutkan hari Anda. Konsep “banyak cara untuk melakukan hal yang sama” bersifat umum dalam pengembangan web dan pemrograman (dan kehidupan!), namun hal ini terutama berlaku pada tooltips. Tidak ada cara khusus untuk membuatnya — dan, pada saat ini, tidak diperlukan lagi — jadi orang-orang menemukan cara berbeda untuk mengisi kekosongan ini.

Hari ini, saya ingin fokus pada satu langkah resepnya saja, yang karena tidak ada nama yang lebih baik, saya sebut saja <>Segitiga kecil di tooltip. Ini adalah salah satu hal yang mendapat sedikit perhatian (memang saya tidak tahu banyak sebelum menulis ini) tetapi ini membuat Anda takjub dengan banyaknya cara untuk membuatnya. Mari kita mulai dengan yang paling sederhana dan beralih ke yang tidak terlalu sederhana.

Idealnya, tooltip hanya berupa satu item. Kami ingin menghindari pencemaran markup kami hanya dengan segitiga kecil ini:

<span class="tooltip">I am a tooltip</span>

Batasan yang cerdas

Sebelum berlari, kita harus belajar berjalan. Sebelum memasang segitiga kecil ini kita harus mempelajari cara membuat segitiga. Mungkin resep segitiga yang paling umum adalah trik perbatasan, yang dapat ditemukan di edisi Stack Overflow tahun 2010 atau bahkan di sini oleh Chris pada tahun 2016.

Singkatnya, batas-batas tersebut bertemu satu sama lain pada sudut 45 derajat, jadi jika suatu elemen memiliki batas tetapi tidak width Dan heightbatas-batasnya akan membentuk empat segitiga sempurna. Yang tersisa adalah mengatur tiga warna batas transparent Hanya satu segitiga yang akan muncul! Anda dapat menemukan versi animasi di CodePen ini oleh Chris Coyier

Segitiga kecil kita biasanya merupakan elemen tiruan di tooltip, jadi kita perlu mengatur dimensinya 0px (Dan itu suatu hal ::before Dan ::after Sudah lakukan ini) dan atur salah satu batasnya saja menjadi warna solid. Kita dapat mengontrol ukuran alas segitiga dengan membuat guratan lainnya lebih lebar, dan tingginya dengan memperbesar guratan yang terlihat.

.tooltip {
  &::before {
    content: "";

    border-width: var(--triangle-base);
    border-style: solid;
    border-color: transparent;

    border-top: var(--triangle-height) solid red;
  }
}

Melampirkan segitiga ke tooltip adalah sebuah seni tersendiri, jadi saya akan mengikuti dasar-dasarnya dan mengatur posisi segitiga kecil menjadi absolute Dan .tooltip ke relativeKemudian mainkan properti internalnya untuk menempatkannya di tempat yang kita inginkan. Satu-satunya hal yang perlu diperhatikan adalah kita harus menerjemahkan segitiga kecil untuk memperhitungkan lebarnya, -50% Jika kita mengidentifikasi posisinya dengan left Properti, dan 50% Jika kita menggunakan right.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top);
    left: var(--triangle-left);

    transform: translateX(-50%);
  }
}

Namun, kita bahkan dapat menggunakan properti Anchor Positioning baru untuk misi tersebut. Apapun metode yang Anda pilih, sekarang kita seharusnya sudah memasang segitiga kecil ini pada tooltip:

Bulat persegi

Salah satu kelemahan dari contoh terakhir ini adalah kami memblokir border Properti sehingga jika kita membutuhkannya untuk hal lain, kita akan kurang beruntung. Namun, ada cara lama lain untuk membuat segitiga kecil ini: kita memutar persegi sebesar 45 derajat dan menyembunyikan setengahnya di balik badan tooltip. Dengan cara ini, sudutnya hanya tampak sebagai segitiga. Kita dapat membuat kotak dari elemen palsu:

.tooltip {
  &::before {
    content: "";

    display: block;
    height: var(--triangle-size);
    width: var(--triangle-size);

    background-color: red;
  }
}

Kemudian letakkan di belakang badan ujung alat. Dalam hal ini, hanya setengahnya yang muncul. Karena persegi telah diputar, maka transformasinya akan terjadi pada kedua sumbu.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: 75%;
    left: 50%;
    z-index: -1; /* So it's behind the tooltip's body */

    transform: translateX(-50%);
    transform: rotate(45deg) translateY(25%) translateX(-50%);
  }
}

Saya juga menemukan bahwa metode ini bekerja paling baik dengan Anchor Positioning karena kita tidak perlu mengubah gaya segitiga kecil setiap kali kita memindahkannya. Berbeda dengan metode border yang mana border visualnya berubah tergantung arah.

Rapikan kotak dengan clip-path

Meskipun saya belum menyebutkannya sebelumnya, Anda mungkin memperhatikan beberapa masalah dengan pendekatan terakhir ini. Pertama, bentuknya tidak terlalu segitiga, jadi bukan yang paling antipeluru; Jika ujung alat terlalu pendek, kotak mungkin akan merayap naik dan memindahkan file <>Segitiga palsu Di bagian samping memperlihatkan sifat persegi aslinya. Kita dapat menyelesaikan kedua masalah tersebut dengan menggunakan clip-path kepemilikan.

itu clip-path Fitur ini memungkinkan kita memilih area elemen yang akan ditampilkan sambil memotong sisanya. Ia bekerja dengan menyediakan jalur yang ingin kita lalui, dan karena kita menginginkan segitiga di luar persegi, kita dapat menggunakannya polygon() pekerjaan. Dibutuhkan titik-titik pada objek dan memotongnya menjadi garis lurus. Poin dapat ditulis sebagai persentase titik asal (yaitu sudut kiri atas), dan dalam hal ini, kita ingin memotong ketiga poin tersebut. 0% 0% (pojok kiri atas), 100% 0% (pojok kanan atas) f 50% 100% (titik tengah bawah).

Karena itu, clip-path akan menjadi nilainya polygon() Ia bekerja dengan tiga titik dalam daftar yang dipisahkan koma:

.tooltip {
  &::before {
    content: "";

    width: var(--triangle-base);
    height: var(--triangle-height);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: translate(-50%);

    background-color: red;
  }
}

Kali ini kita akan mengaturnya top Dan left Properti menggunakan variabel CSS, yang akan berguna nantinya.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top); /* 100% */
    left: var(--triangle-left); /* 50% */

    transform: translate(-50%);
  }
}

Dan sekarang kita seharusnya mempunyai segitiga kecil nyata yang melekat pada tooltip:

Namun, jika kita membawa segitiga kecil ke ujung kedua sisinya, kita masih bisa melihat bagaimana segitiga tersebut meluncur keluar dari badan tooltip. Untung, clip-path Properti ini memberi kita kontrol yang lebih baik terhadap bentuk segitiga. Dalam hal ini, kita dapat mengubah titik-titik yang dilalui potongan tersebut bergantung pada posisi horizontal segitiga kecil. Untuk pojok kiri atas, kita ingin nilainya mendekati horizontal 50% Saat posisi tooltip mendekat 0%sementara itu harusnya mendekati sudut kanan atas 50% Saat posisi tooltip mendekat 100%.

berikut ini min() + max() Kombo melakukan hal itu:

.tooltip {
  clip-path: polygon(
    max(50% - var(--triangle-left), 0%) 0,
    min(150% - var(--triangle-left), 100%) 0%,
    50% 100%
  );
}

itu calc() Fungsi ini tidak diperlukan dalam fungsi matematika seperti min() Dan max().

Coba gerakkan tooltip dan perhatikan bagaimana bentuknya berubah tergantung posisinya pada sumbu horizontal:

menggunakan border-image kepemilikan

Tampaknya segitiga kecil terakhir adalah segitiga terakhir. Namun, bayangkan situasi di mana Anda telah menggunakan kedua elemen semu dan tidak dapat menyediakan satu elemen pun untuk segitiga kecil, atau sederhananya, Anda menginginkan cara yang lebih elegan untuk melakukannya tanpa elemen semu apa pun. Tugas tersebut mungkin tampak mustahil, namun kita dapat menggunakan dua properti dari tugas ini: apa yang telah terlihat clip-path Dan border-image kepemilikan.

menggunakan clip-path Properti, kita dapat memangkas bentuk tooltip – dengan menyertakan segitiga kecil! – Langsung dari barangnya. Masalahnya adalah latar belakang elemen tersebut tidak cukup besar untuk menjelaskan segitiga kecil. Namun, kita bisa menggunakannya border-image Khasiatnya adalah membuat wallpaper menjadi besar. Sintaksnya agak rumit, jadi saya sarankan membaca penjelasan selengkapnya border-image Oleh Timani Afif. Singkatnya, ini memungkinkan kita menggunakan gambar atau gradien CSS sebagai batas elemen. Dalam hal ini, kita membuat goresan selebar segitiga dan berwarna solid.

.tooltip {
  border-image: fill 0 // var(--triangle-height) conic-gradient(red 0 0);;
}

Kali ini pemotongannya akan sedikit lebih rumit, karena kita juga akan memotong segitiga kecil, sehingga diperlukan lebih banyak titik. Tepatnya, tujuh poin berikut ini:

Ini diterjemahkan sebagai berikut clip-path nilai:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    calc(50% + var(--triangle-base) / 2) 100%,
    50% calc(100% + var(--triangle-height)),
    calc(50% - var(--triangle-base) / 2) 100%
  );
}

Kita dapat membuatnya cerdas dengan menentukan titik bawah segitiga kecil ketika melebihi sisi mana pun dari tooltip:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    min(var(--triangle-left) + var(--triangle-base) / 2, 100%) 100%,
    var(--triangle-left) calc(100% + var(--triangle-height)),
    max(var(--triangle-left) - var(--triangle-base) / 2, 0%) 100%
  ;
}

Sekarang kita memiliki segitiga kecil terakhir dari tooltip, yang merupakan bagian dari badan utama dan hanya menggunakan satu elemen!

Informasi lebih lanjut

• CSS yang rumit namun mengagumkan border-image Properti (Timani Afif)
• Ubah batas menjadi segitiga CSS yang mengagumkan (Web Optimis)

Trik terkait!

---

Segitiga kecil di tooltip awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.