Tooltip with image and content
This is an example of another tooltip with an image and content, designed using CSS, HTML, and Bootstrap framework 4. The tooltip image is imported to the code with its URL. The body of the form is given a background color of #E0E0E0, whereas the card header is given a color as #9575CD and a font color as #fff. The tooltip item is given the styles of background as rgba(0, 0, 0, 0.1), cursor as pointer to get the hand cursor effect on a hover event, display as inline-block, font-weight as 500, and padding as 0 10px. The tooltip content is given a style set of width as 360px, font-size as 14px, line height as 30px, box shadow as -5px -5px 15px rgba(48, 54, 61, 0.2), and background color as : #2b2b2b. The tooltip content takes a border color of #2a3035, in the active mode. In a hover event, the tooltip takes transform effect of translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg). The tooltip text is given a font-size as 14px, and font color as #fff.