Replace `title` attributes with Tooltips usable in all devices

mercime commented 7 years ago

Latest codepens with patches for # 1 and # 3 in Trac:

White tooltip - http://codepen.io/mercime/pen/bgYaBR
Black tooltip - http://codepen.io/mercime/pen/RKaQbj
Black tooltip with white box shadow - http://codepen.io/dcavins/pen/rmJbbw

Markup additions to the elements which require additional text information:

class="bp-tooltip" add to element with the tooltip
data-title="the-text-tip"
aria-label="the-text-info" - as needed only

This CSS-only solution to implement the tooltip usable in all devices can be extended or easily be improved/replaced by themers who could add their own styles plus jQuery or pure JS scripts. Will be adding max-width and word-break to the patch in Trac.

To implement this in bp-nouveau:

create _bp_tooltips.scss
move simple animation to _bp_animations.scss
import _bp_tooltips.scss to buddypress.scss under @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips?

hnla commented 7 years ago

Agreed on the implement steps.

I wonder whether we actually need the class though 'bp-tooltip' and couldn't just hook styles to 'data-title' attr?

I would like a very subtle box shadow on the white version, it just helps lift the box off the page & lends visual focus.

mercime commented 7 years ago

Agreed on the implement steps.

Thank you. Will start porting over to bp-nouveau.

I wonder whether we actually need the class though 'bp-tooltip' and couldn't just hook styles to 'data-title' attr?

Can use 'data-title' attr to style. Thinking of expanding simple CSS tooltip to be customizable by themers should they choose to with other styles and JS, especially with touch screens. bp-tooltips

I would like a very subtle box shadow on the white version, it just helps lift the box off the page & lends visual focus.

Sure thing.

hnla commented 7 years ago

Oh so you want to provide classes to enable some additional styles - understood.

With those class options lets comment the top of the file just to make it clear they are available, maybe it's obvious though?

With box shadow check the mixins file for available & customizable options.

hnla commented 7 years ago

@mercime you may want to check the adjustment I've made to show all comments link.

hnla commented 7 years ago

Closing this as completed, if we find stray tooltips required we can re-open to add reference.

buddypress / next-template-packs

Replace `title` attributes with Tooltips usable in all devices #163