Prevent CSS tooltip from going out of page/window

Question

I have a CSS only tooltip which loads a span as a tooltip when you hover the link. However this is positioned with CSS but if the link is near to the t

Answer 1

Option 1) Using title global attribute

title - Specifies extra information about an element (displayed as a tool tip)

Docs: The title global attribute Use of the title attribute is highly problematic for:

• People using touch-only devices
• People navigating with keyboards
• People navigating with the aid of assistive technology such as screen readers or magnifiers
• People experiencing fine motor control impairments
• People with cognitive concerns. This is mainly due to inconsistent browser support, compounded by the additional complication introduced by assistive technology's parsing of the browser-rendered page.

span {border-bottom: 1px dashed pink}

Mouse over this paragraph, to display the title attribute as a tooltip.

Option 2) If the text and the tooltip text are fixed sized: 4 css classes can be used to place the tooltip referencing the trigger element. Something like:

.tooltip-top {top: -3em}
.tooltip-bottom {top: 0}
.tooltip-left {left: -3em}
.tooltip-right {right: 0}