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. Source: https://bbbootstrap.com/snippets/tooltip-image-and-content-36745684

This is an example of a simple tooltip effect, designed using CSS, HTML, and Bootstrap framework 4. The tooltip styles are imported to the code with its URL. The tooltip form is given the padding styles of padding as 13rem, and margin-left as 300px. The tooltip button is given the style of display as inline-block, and min-width as 100px. The text of the button is aligned as center. The background color of the button is set as #ff3d2e, whereas the font color of the button is set as #fff. The font-size of the button is given as 1rem, whereas the margin-top style is given as 1.5rem. The button has a border-radius of 5px, and it is also given a transition style as background 0.1s linear. The tooltip gets activated and displays its message, in a hover event over the button. Source: https://bbbootstrap.com/snippets/simple-tooltips-onhover-74402564