{"id":3478,"date":"2022-07-23T13:45:55","date_gmt":"2022-07-23T13:45:55","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3478"},"modified":"2023-06-10T11:36:20","modified_gmt":"2023-06-10T11:36:20","slug":"css-tutorial-fancy-animated-tooltip-playful-little-tooltip-ideas","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-fancy-animated-tooltip-playful-little-tooltip-ideas\/","title":{"rendered":"CSS Tutorial &#8211; Fancy &#038; Animated Tooltip &#8211; Playful Little Tooltip Ideas"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a><\/span> &#8211; A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Fancy &amp; Animated Tooltip\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/dyeVJNP?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/dyeVJNP\"><br \/>\nCSS Tutorial &#8211; Fancy &amp; Animated Tooltip<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* \r\n  You want a simple and fancy tooltip?\r\n  Just copy all [data-tooltip] blocks:\r\n*\/\r\n[data-tooltip] {\r\n  --arrow-size: 5px;\r\n  position: relative;\r\n  z-index: 10;\r\n}\r\n\r\n\/* Positioning and visibility settings of the tooltip *\/\r\n[data-tooltip]:before,\r\n[data-tooltip]:after {\r\n  position: absolute;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  left: 50%;\r\n  bottom: calc(100% + var(--arrow-size));\r\n  pointer-events: none;\r\n  transition: 0.2s;\r\n  will-change: transform;\r\n}\r\n\r\n\/* The actual tooltip with a dynamic width *\/\r\n[data-tooltip]:before {\r\n  content: attr(data-tooltip);\r\n  padding: 10px 18px;\r\n  min-width: 50px;\r\n  max-width: 300px;\r\n  width: max-content;\r\n  width: -moz-max-content;\r\n  border-radius: 6px;\r\n  font-size: 14px;\r\n  background-color: rgba(59, 72, 80, 0.9);\r\n  background-image: linear-gradient(30deg,\r\n    rgba(59, 72, 80, 0.44),\r\n    rgba(59, 68, 75, 0.44),\r\n    rgba(60, 82, 88, 0.44));\r\n  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: pre-wrap;\r\n  transform: translate(-50%,  calc(0px - var(--arrow-size))) scale(0.5);\r\n}\r\n\r\n\/* Tooltip arrow *\/\r\n[data-tooltip]:after {\r\n  content: '';\r\n  border-style: solid;\r\n  border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); \/* CSS triangle *\/\r\n  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;\r\n  transition-duration: 0s; \/* If the mouse leaves the element, \r\n                              the transition effects for the \r\n                              tooltip arrow are \"turned off\" *\/\r\n  transform-origin: top;   \/* Orientation setting for the\r\n                              slide-down effect *\/\r\n  transform: translateX(-50%) scaleY(0);\r\n}\r\n\r\n\/* Tooltip becomes visible at hover *\/\r\n[data-tooltip]:hover:before,\r\n[data-tooltip]:hover:after {\r\n  visibility: visible;\r\n  opacity: 1;\r\n}\r\n\/* Scales from 0.5 to 1 -&gt; grow effect *\/\r\n[data-tooltip]:hover:before {\r\n  transition-delay: 0.3s;\r\n  transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);\r\n}\r\n\/* \r\n  Arrow slide down effect only on mouseenter (NOT on mouseleave)\r\n*\/\r\n[data-tooltip]:hover:after {\r\n  transition-delay: 0.5s; \/* Starting after the grow effect *\/\r\n  transition-duration: 0.2s;\r\n  transform: translateX(-50%) scaleY(1);\r\n}\r\n\/*\r\n  That's it for the basic tooltip.\r\n\r\n  If you want some adjustability\r\n  here are some orientation settings you can use:\r\n*\/\r\n\r\n\/* LEFT *\/\r\n\/* Tooltip + arrow *\/\r\n[data-tooltip-location=\"left\"]:before,\r\n[data-tooltip-location=\"left\"]:after {\r\n  left: auto;\r\n  right: calc(100% + var(--arrow-size));\r\n  bottom: 50%;\r\n}\r\n\r\n\/* Tooltip *\/\r\n[data-tooltip-location=\"left\"]:before {\r\n  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);\r\n}\r\n[data-tooltip-location=\"left\"]:hover:before {\r\n  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);\r\n}\r\n\r\n\/* Arrow *\/\r\n[data-tooltip-location=\"left\"]:after {\r\n  border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size);\r\n  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);\r\n  transform-origin: left;\r\n  transform: translateY(50%) scaleX(0);\r\n}\r\n[data-tooltip-location=\"left\"]:hover:after {\r\n  transform: translateY(50%) scaleX(1);\r\n}\r\n\r\n\r\n\r\n\/* RIGHT *\/\r\n[data-tooltip-location=\"right\"]:before,\r\n[data-tooltip-location=\"right\"]:after {\r\n  left: calc(100% + var(--arrow-size));\r\n  bottom: 50%;\r\n}\r\n\r\n[data-tooltip-location=\"right\"]:before {\r\n  transform: translate(var(--arrow-size), 50%) scale(0.5);\r\n}\r\n[data-tooltip-location=\"right\"]:hover:before {\r\n  transform: translate(var(--arrow-size), 50%) scale(1);\r\n}\r\n\r\n[data-tooltip-location=\"right\"]:after {\r\n  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px;\r\n  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;\r\n  transform-origin: right;\r\n  transform: translateY(50%) scaleX(0);\r\n}\r\n[data-tooltip-location=\"right\"]:hover:after {\r\n  transform: translateY(50%) scaleX(1);\r\n}\r\n\r\n\r\n\r\n\/* BOTTOM *\/\r\n[data-tooltip-location=\"bottom\"]:before,\r\n[data-tooltip-location=\"bottom\"]:after {\r\n  top: calc(100% + var(--arrow-size));\r\n  bottom: auto;\r\n}\r\n\r\n[data-tooltip-location=\"bottom\"]:before {\r\n  transform: translate(-50%, var(--arrow-size)) scale(0.5);\r\n}\r\n[data-tooltip-location=\"bottom\"]:hover:before {\r\n  transform: translate(-50%, var(--arrow-size)) scale(1);\r\n}\r\n\r\n[data-tooltip-location=\"bottom\"]:after {\r\n  border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);\r\n  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;\r\n  transform-origin: bottom;\r\n}\r\n \r\n  \r\n  [data-tooltip]:after {\r\n    bottom: calc(100% + 3px);\r\n  }\r\n  [data-tooltip]:after {\r\n    border-width: 7px 7px 0px 7px;\r\n  }\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Playful Little Tooltip Ideas\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/JjvrMWQ?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/JjvrMWQ\"><br \/>\nCSS Tutorial &#8211; Playful Little Tooltip Ideas<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">.iconscontainer {\r\n  position: relative;\r\n  margin: 0 5em;\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n\r\n  .icon {\r\n    position: relative;\r\n    display: flex;\r\n    width: 150px;\r\n    height: 150px;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    border-radius: 50%;\r\n    background-color: #fff;\r\n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.07);\r\n\r\n    .fa-github {\r\n      font-size: 4rem;\r\n      background-image: linear-gradient(\r\n    375deg,\r\n    rgb(28, 199, 208),\r\n    rgb(46, 222, 152)\r\n  );\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n    }\r\n\r\n    span {\r\n      position: absolute;\r\n      top: 60%;\r\n      margin-top: 10px;\r\n      padding: .55rem 1rem;\r\n      font-size: 1rem;\r\n      font-weight: 500;\r\n      white-space: nowrap;\r\n      color: #000;\r\n      border-radius: 50px;\r\n      background-color: #fff;\r\n      box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1),\r\n        0 5px 15px rgba(0, 0, 0, 0.07);\r\n\r\n      pointer-events: none;\r\n      -webkit-user-select: none;\r\n      -moz-user-select: none;\r\n      -ms-user-select: none;\r\n      user-select: none;\r\n      opacity: 0;\r\n      transition: all 0.2s ease-in-out;\r\n    }\r\n    &amp;:hover {\r\n      span {\r\n        top: 100%;\r\n        opacity: 0.9;\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; A tooltip is often used to specify extra information <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-fancy-animated-tooltip-playful-little-tooltip-ideas\/\" title=\"CSS Tutorial &#8211; Fancy &#038; Animated Tooltip &#8211; Playful Little Tooltip Ideas\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[197,350,351,103,227],"newstopic":[],"class_list":{"0":"post-3478","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-tutorial","10":"tag-tooltip","11":"tag-tooltip-css","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3478"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3478\/revisions"}],"predecessor-version":[{"id":3480,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3478\/revisions\/3480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3528"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3478"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}