Segitiga kecil di tooltip – Beragampengetahuan

Tooltip seperti makanan buatan sendiri: setiap orang menggunakannya, dan setiap orang memiliki resep sendiri untuk membuatnya. Jika Anda tidak dapat mengingat resep tertentu, Anda akan mencarinya, mengikutinya, dan melanjutkan hari Anda. Konsep “ada banyak cara untuk melakukan hal yang sama” bersifat universal dalam pengembangan dan pemrograman web (dan kehidupan!), namun terutama berlaku untuk tooltips. Belum ada cara khusus untuk membuatnya—dan memang belum diperlukan—sehingga orang-orang telah menemukan cara berbeda untuk mengisi kekosongan tersebut.

Hari ini saya hanya akan fokus pada satu langkah dalam resepnya, yang saya sebut karena tidak ada nama yang lebih baik Segitiga kecil di tooltip. Ini adalah salah satu hal yang paling sedikit mendapat perhatian (memang saya tidak tahu banyak tentangnya sebelum menulis artikel ini), namun mengejutkan betapa banyak cara untuk membuatnya. Mari kita mulai dengan yang paling sederhana dan lanjutkan ke yang kurang sederhana.

Idealnya, tooltip hanyalah satu elemen. Kami ingin menghindari pencemaran markup kami hanya karena segitiga kecil itu:

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

perbatasan yang cerdas

Sebelum berlari, kita harus belajar berjalan terlebih dahulu. Sebelum kita bisa menyambung segitiga kecil itu, kita harus belajar membuat segitiga. Mungkin pendekatan yang paling umum terhadap segitiga adalah trik batas, yang dapat ditemukan dalam pertanyaan Stack Overflow dari tahun 2010, atau bahkan di sini dari Chris pada tahun 2016.

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

Biasanya, segitiga kecil kita akan menjadi elemen semu tooltip, jadi kita perlu mengatur dimensinya 0px (Ini adalah sesuatu ::before Dan ::after Sudah melakukan ini) dan atur hanya satu batas menjadi warna solid. Kita dapat mengontrol ukuran alas segitiga dengan membuat batas lainnya lebih lebar, dan tinggi segitiga dengan memperbesar batas 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 tooltipnya adalah sebuah seni tersendiri, jadi saya akan mulai dengan dasar-dasarnya dan mengatur posisi segitiga kecil menjadi absolute Dan .tooltip tiba relativelalu gunakan properti insertnya untuk menempatkannya di tempat yang kita inginkan. Satu-satunya hal yang perlu diperhatikan adalah kita harus menerjemahkan segitiga kecil agar sesuai dengan lebarnya, -50% Jika kita mengatur posisinya 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 pemosisian jangkar baru untuk menyelesaikan pekerjaan. Apapun metode yang Anda pilih, sekarang kita harus melampirkan segitiga kecil itu ke tooltip:

memutar persegi

Salah satu kelemahan dari contoh terakhir adalah kita mencegah border Jadi jika kita membutuhkannya untuk hal lain, kita kurang beruntung. Namun, ada cara kuno lain untuk membuat segitiga kecil ini: kita memutar persegi sebesar 45° dan menyembunyikan setengahnya di balik badan tooltip. Dengan cara ini, hanya sudut-sudutnya yang tampak segitiga. Kita dapat membuat persegi menggunakan elemen semu:

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

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

    background-color: red;
  }
}

Kemudian, letakkan di belakang badan tooltip. Dalam contoh ini, hanya separuh yang ditampilkan. Karena persegi diputar, 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 lebih baik dengan posisi jangkar karena setiap kali kita menggerakkan segitiga kecil, kita tidak perlu mengubah gayanya. Berbeda dengan metode border, batas yang terlihat pada metode border berubah berdasarkan orientasinya.

potong persegi clip-path

Meskipun saya belum menyebutkannya sebelumnya, Anda mungkin memperhatikan bahwa ada beberapa masalah dengan metode terakhir. Pertama, ini bukan segitiga, jadi ini bukan yang paling antipeluru. Jika tooltip terlalu pendek, blok mungkin terlepas dari atas dan bergerak segitiga palsu Sisi-sisinya memperlihatkan sifat persegi aslinya. Kita dapat menyelesaikan kedua masalah ini dengan menggunakan clip-path milik.

ini clip-path Properti memungkinkan kita memilih area elemen yang akan ditampilkan sambil memotong sisanya. Ia bekerja dengan menyediakan jalur yang ingin kita potong, dan karena kita ingin mengeluarkan segitiga dari persegi, kita dapat menggunakannya polygon() Fungsi. Dibutuhkan titik-titik dalam elemen dan memangkasnya dengan garis lurus. Poin-poin ini dapat ditulis sebagai persentase dari titik asal (yaitu pojok kiri atas), dalam hal ini kita ingin memangkas tiga poin 0% 0% (pojok kiri atas), 100% 0% (pojok kanan atas) dan 50% 100% (titik tengah bawah).

Jadi, clip-path Nilainya akan menjadi polygon() Fungsi ini menempatkan tiga titik ini 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 nantinya akan berguna.

.tooltip {
  position: relative;

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

    transform: translate(-50%);
  }
}

Sekarang kita harus memiliki segitiga yang sangat kecil yang melekat pada tooltip:

Namun, jika kita memindahkan segitiga kecil ke sisi jauh di kedua sisi, kita masih bisa melihat bagaimana segitiga tersebut meluncur keluar dari badan tooltip. Untung, clip-path Properti memberi kita kontrol lebih besar terhadap bentuk segitiga. Dalam hal ini, kita dapat mengubah titik-titik yang dilewati trim berdasarkan posisi horizontal segitiga kecil. Untuk pojok kiri atas, kita ingin nilai horizontalnya mendekati 50% Ketika posisi tooltip sudah dekat 0%sedangkan sudut kanan atas harus dekat 50% Ketika posisi tooltip sudah dekat 100%.

berikut ini min() + max() Kombinasi melakukan hal ini:

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

ini calc() Fungsi tidak diperlukan dalam fungsi matematika, mis. min() Dan max().

Coba gerakkan tooltip dan lihat bagaimana bentuknya berubah bergantung pada posisinya pada sumbu horizontal:

menggunakan border-image milik

Sepertinya segitiga kecil terakhir kita adalah segitiga terakhir kita. Namun, bayangkan situasi di mana Anda telah menggunakan dua elemen semu tetapi tidak dapat menyisihkan satu untuk segitiga kecil, atau sederhananya, Anda menginginkan cara yang lebih elegan untuk mencapainya tanpa diperlukan elemen semu apa pun. Tugas ini mungkin terlihat mustahil, namun kita dapat melakukannya menggunakan dua properti: Sudah terlihat clip-path Dan border-image milik.

menggunakan clip-path properti, kita dapat memangkas bentuk tooltip – termasuk segitiga kecil! — diambil langsung dari elemennya. Masalahnya adalah latar belakang elemen tidak cukup besar untuk menampung segitiga kecil. Namun, kita bisa menggunakannya border-image Properti untuk membuat latar belakang yang terlalu banyak. Sintaksnya agak rumit, jadi saya sarankan membaca studi mendalam yang lengkap ini border-image Pengarang : Temani Afif. Singkatnya, ini memungkinkan kita menggunakan gambar atau gradien CSS sebagai batas elemen. Pada contoh ini kita akan membuat border selebar tinggi segitiga dan menggunakan warna solid.

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

Kali ini pemangkasannya akan sedikit lebih rumit karena kita juga memangkas segitiga-segitiga kecil, sehingga dibutuhkan lebih banyak titik. Tepatnya, ada tujuh poin:

Ini berarti 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 menutupi segitiga kecil ketika titik dasarnya melampaui kedua sisi 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 dan hanya menggunakan satu elemen!

Informasi lebih lanjut

Kiat terkait!