Issue 2356 - Implemented tooltip functionality

options.html

Index: options.html
===================================================================
--- a/options.html
+++ b/options.html
@@ -75,10 +75,20 @@
             <h1 class="i18n_options_blocking_title"></h1>
             <div class="flex-container">
               <div id="blocking-languages">
-                <p class="option-name">
+                <div class="option-name">
                   <span class="i18n_options_language_title"></span>
-                  <a class="i18n_options_readMore tooltip" target="_blank"></a>
-                </p>
+                  <span class="tooltip">

[saroyanm, 2015/07/22 18:25:38]

I think we shouldn't put div inside span, until we really need it, actually
can't find even case why we would need it.

[Thomas Greiner, 2015/07/28 14:13:07]

Done.

+                    <span class="i18n_options_readMore"></span>
+                    <div role="tooltip">
+                      <img src="skin/tooltips/block.png">

[saroyanm, 2015/07/22 18:25:38]

Please add alt attribute.

[saroyanm, 2015/07/22 18:25:38]

I assume we are not adding this images to sprite, because we expect them to be
replaceable in future ?

[saroyanm, 2015/07/22 18:25:38]

Nit: please add closing slash for consistency.

[Thomas Greiner, 2015/07/28 14:13:06]

No, because we don't need to. A sprite is a workaround for situations when you
(a) have limited bandwidth or high latency or (b) when you want to make sure
that images are loaded before making them visible to avoid flashing.

Therefore sprites usually make sense for small icons that are used repeatedly
across the page. In our case, however, (a) is not a limitation and for (b) it's
not necessary since we have the transition delay in there anyway.

[Thomas Greiner, 2015/07/28 14:13:06]

Done.

[Thomas Greiner, 2015/07/28 14:13:06]

Done. Note that I intentionally left it empty since it's only a decorative image
and is therefore not necessary for navigating the page. See also
http://www.w3.org/WAI/tutorials/images/decorative/

[saroyanm, 2015/07/28 17:21:42]

Sure, but we still need required attribute even if they can be empty, thanks for
the link, good to know.

[saroyanm, 2015/07/28 17:21:42]

Fare enough

[Thomas Greiner, 2015/07/28 18:19:22]

Yeah, that's what I did.

+                      <div class="i18n_options_language_title_tooltip_top"></div>
+                      <div>
+                        <div class="i18n_options_language_title_tooltip_bottom_1"></div>

[saroyanm, 2015/07/22 18:25:38]

I think they behave as paragraph here, so I think make sense to use P tag here.

[Thomas Greiner, 2015/07/28 14:13:07]

Done.

+                        <div class="i18n_options_language_title_tooltip_bottom_2"></div>
+                      </div>
+                    </div>
+                  </span>
+                </div>
                 <ul id="blocking-languages-table" class="table list">
                   <template>
                     <input type="checkbox" class="control" />
@@ -93,14 +103,20 @@
                 </div>
               </div>
               <div id="further-blocking">
-                <p class="option-name">
+                <div class="option-name">
                   <strong class="i18n_options_furtherBlocking_title"></strong>
-                  <a class="i18n_options_readMore tooltip" target="_blank"></a>
-                </p>
+                  <span class="tooltip">

[saroyanm, 2015/07/22 18:25:38]

Same as above, this should be div. 
I'll stop commenting for all similar cases that covered above, because looks
like most of them applies to each tooltip block.

[Thomas Greiner, 2015/07/28 14:13:07]

Done.

+                    <span class="i18n_options_readMore"></span>
+                    <div role="tooltip" class="flip-vertical">
+                      <img src="skin/tooltips/more.png">
+                      <div class="i18n_options_furtherBlocking_title_tooltip"></div>
+                    </div>
+                  </span>
+                </div>
                 <div id="custom-wrapper">
                   <ul id="recommend-list-table" class="table list">
                     <template>
-                      <input type="checkbox" class=control />
+                      <input type="checkbox" class="control" />
                       <span class="display"></span>
                       <span class="popular"></span>
                     </template>
@@ -125,10 +141,20 @@
             <h1 class="i18n_options_exceptions_title"></h1>
             <div class="flex-container">
               <div id="acceptable-ads">
-                <p class="option-name">
+                <div class="option-name">
                   <strong class="i18n_options_acceptableAds_title"></strong>
-                  <a class="i18n_options_readMore tooltip" target="_blank"></a>
-                </p>
+                  <span class="tooltip">
+                    <span class="i18n_options_readMore"></span>
+                    <div role="tooltip">
+                      <img src="skin/tooltips/acceptable-ads.png">
+                      <div>
+                        <div class="i18n_options_acceptableAds_title_tooltip_1"></div>

[saroyanm, 2015/07/22 18:25:38]

Here again tooltips behave as paragraph or heading :/
I don't have strong opinion here because the tooltips are bit different.
So in case they will stay so you can use here whatever element you want, but
maybe we can describe them somehow with role attribute maybe, anyway we can
rethink regarding that for accessibility issue.

[Thomas Greiner, 2015/07/28 14:13:06]

Done.

+                        <div class="i18n_options_acceptableAds_title_tooltip_2"></div>
+                        <div class="i18n_options_acceptableAds_title_tooltip_3"></div>
+                      </div>
+                    </div>
+                  </span>
+                </div>
                 <ul id="acceptableads-table" class="table list">
                   <template>
                     <input type="checkbox" class="control" />
@@ -137,10 +163,20 @@
                 </ul>
               </div>
               <div id="whitelisting">
-                <p class="option-name">
+                <div class="option-name">
                   <strong class="i18n_options_whitelisted_title"></strong>
-                  <a class="i18n_options_readMore tooltip" target="_blank"></a>
-                </p>
+                  <span class="tooltip">
+                    <span class="i18n_options_readMore"></span>
+                    <div role="tooltip" class="flip-vertical">
+                      <img src="skin/tooltips/whitelisted.png">
+                      <div>
+                        <div class="i18n_options_whitelisted_title_tooltip_top_1"></div>
+                        <div class="i18n_options_whitelisted_title_tooltip_top_2"></div>
+                      </div>
+                      <div class="i18n_options_whitelisted_title_tooltip_bottom"></div>
+                    </div>
+                  </span>
+                </div>
                 <ul id="whitelisting-table" class="table list">
                   <template>
                     <button class="delete control"></button>