[Kimchi-devel] [PATCH] ui: Add tooltip when hovering long names

[Leonardo Augusto Guimarães Garcia]

Reviewed-by: Leonardo Garcia <lagarcia at br.ibm.com>
Tested-by: Leonardo Garcia <lagarcia at br.ibm.com>

On 02/18/2014 10:58 AM, Crístian Viana wrote:
> If the storage pool or network names are very long strings, they are
> trimmed (e.g. "myverylongnetworkname" becomes something like "myverylo...").
> If multiple names have the same prefixes, the user will not be able to
> distinguish them.
>
> Add tooltips displaying the full names when hovering storage pool and
> network names.
>
> Signed-off-by: Crístian Viana <vianac at linux.vnet.ibm.com>
> ---
>  ui/pages/tabs/network.html.tmpl | 2 +-
>  ui/pages/tabs/storage.html.tmpl | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
>
> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
> index 81c1566..83c1d7e 100644
> --- a/ui/pages/tabs/network.html.tmpl
> +++ b/ui/pages/tabs/network.html.tmpl
> @@ -87,7 +87,7 @@
>  </div>
>  <script id="networkItem" type="text/html">
>      <div id='{name}' class='item'>
> -    <span class='column column-name cell'>{name}</span><!--
> +    <span class='column column-name cell' title="{name}">{name}</span><!--
>   --><span class='column column-state cell'><span class='network-state {state}'></span></span><!--
>   --><span class='column column-type cell'>{type}</span><!--
>   --><span class='column column-interface cell'>{interface}</span><!--
> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
> index b38eb63..6930c22 100644
> --- a/ui/pages/tabs/storage.html.tmpl
> +++ b/ui/pages/tabs/storage.html.tmpl
> @@ -48,7 +48,7 @@
>      <li id="{name}">
>          <div class="storage-li in" data-name="{name}" data-stat="{state}">
>              <div class="storage-name">
> -                <span class="storage-title">{name}</span>
> +                <span class="storage-title" title="{name}">{name}</span>
>                  <span class="storage-title usage">{usage}%</span>
>              </div>
>              <div class="storage-state">