How To Add CSS Attributes To The UniGui Components?

[sobakava]

http://kushagragour.in/lab/hint/

 

I wish to use this kind of hint style with my UniGui application. I know how to add a CSS style to a component but I just don't know how to add an attribute to an object, in this case it is "data-hint".

 

How can I do this? "Without" using UniLabel TextConversion interpreted as txtHTML. For instance I just want to 

 

Hello Sir, <span class="hint--bottom" data-hint="Thank you!">hover over me.</span>

 

 

 

I thought something like this would do it. But it seems like it is not applicable.

function added(sender, container, pos, eOpts)

{

              sender.setAttribute("data-hint", "Hello");

              sender.addCls('hint--bottom');

}

[erich.wanker]

What happens if you inject the code via javascript: .... UniSession.AddJS ?

element.setAttribute(attributename,attributevalue)

[sobakava]

Thanks Erich,

 

Actually it did work. Thanks But I still can't see the tooltip:

 

This is the Extevents / added of my panel that I want to add tooltip.

 

function added(sender, container, pos, eOpts)
{
  var html=sender.id;

  Ext.Function.defer(function(){
   document.getElementById(html).setAttribute('data-hint', 'hello');
   document.getElementById(html).classList.add('hint--bottom');
  }, 100, this, []);

this is how the result looks like:

 

 

 

The result seems like I wanted it to be:

 

 

<div class="x-panel x-abs-layout-item x-panel-default hint--bottom" style="left:96px;top:56px;width:256px;height:128px;" id="O13_id" data-hint="hello">

 

    <div id="O13_id-body" class="x-panel-body x-panel-body-default x-abs-layout-ct x-panel-body-default" role="presentation" style="width: 256px; height: 128px; left: 0px; top: 0px;">

      <span id="O13_id-outerCt" style="display: table; width: 100%; table-layout: fixed; height: 100%;" role="presentation">

         <div id="O13_id-innerCt" style="display:table-cell;height:100%;vertical-align:top;" class="" role="presentation">

             <table border="0" width="100%" height="100%"><tbody><tr>

                <td id="O13_id_td" style="font:11px Tahoma;color:#000000;text-align:center">UniPanel1</td></tr></tbody>

              </table>

         </div>

      </span>

    </div>

 

 

but only a small piece of arrow appears for a fraction of time and disappears.

 

 

 

 

 

 

I have also tried to add this class and attribute to body div instead of the top level parent. The visual result is the same.

 

function added(sender, container, pos, eOpts)
{
  var html=sender.id;
  html=html+'-body';
  Ext.Function.defer(function(){
   document.getElementById(html).setAttribute('data-hint', 'hello');
   document.getElementById(html).classList.add('hint--bottom');
  }, 100, this, []);


}

 

 

 

 

 

[sobakava]

I have manually deleted following during the runtime:  (using Chrome's inspect elements feature)

 

top parent div, (013_id)

body div  (013_id-body)

inner div  (013_id-innerCt)

 

and left the outerCt with the hint attributers and class.

 

 

 

Then the hint started to appear as below. How to do it properly with Unigui / Extjs?

 

 

[sobakava]

PS:

 

This works with TUnicontainerPanel perfecly, but not with TUniPanel.

function added(sender, container, pos, eOpts)
{
  var html=sender.id;

  Ext.Function.defer(function(){
   document.getElementById(html).setAttribute('data-hint', 'hello');
   document.getElementById(html).classList.add('hint--bottom');
  }, 100, this, []);

[sobakava]

 

Well, my problem is turned into "How to make tooltips appear top of every other element in the page?"

 

I decided that I can place my TUnipanels into TuniContainerPanels and add Javascript to TuniContainerPanel to activate this kind of fancy looking tooltips.

 

But if the TUniContainerpanel is a child of another one, the tooltip becomes clipped by the surrounding panel.

[Marlon Nardi]

to solve this you can add an index in a CSS class;
Ex:

z-index: 1000;

your css tooltip will override all screens

[sobakava]

to solve this you can add an index in a CSS class;

Ex:

z-index: 1000;

your css tooltip will override all screens

 

I already tried it. Unfortunately it didn't help. Please let me know if you can get there.