locked
tooltip Behaviour not working with finger touch but works with mouseOver

    Question

  • Hello All

    I've got a problem with getting a tooltip to show up in a viewBox I have. When I hover my mouse cursor over the div then the tooltip shows up fine, however when I try and do the same thing using my finger the tooltip doesn't show up. I can get the tooltip to work using my finger when I touch and hold the ratings control in scenario 6 of the ListView item templating sample.

    My listView's options have been set to    selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none'

    To give you a breakdown of my listView. It uses a template function which programmatically builds a grid and then inside one of the gridItems it creates a viewBox control which is populated by a variable number of Div's. I've inserted my template code for your reference.

     function MainItemTemplate(itemPromise) {
            return itemPromise.then(function (currentItem) {
    
                //var currencyFormatRand = new Windows.Globalization.NumberFormatting.CurrencyFormatter("ZAR");
                //currencyFormatRand.fractionDigits = 0;
    
    
    
                var decimalFormat1 = new Windows.Globalization.NumberFormatting.DecimalFormatter();
                decimalFormat1.isGrouped = true;
                decimalFormat1.fractionDigits = 0;
                
                var result = document.createElement("div");
    
                var transactionContainerWhiteSpace = document.createElement("div");
                transactionContainerWhiteSpace.id = "transactionContainerWhiteSpace";
    
                var transactionContainer = document.createElement("div");
                transactionContainer.id = "transactionTemplate";
    
                transactionContainer.style.display = "-ms-grid";
                transactionContainer.style.msGridColumns = "5fr 15fr 15fr 5fr";
                transactionContainer.style.msGridRows = "1fr 1fr 1fr 1fr 1fr";
    
    
                var gridItem1 = document.createElement("div");
                gridItem1.id = "GridItem1"
                gridItem1.style.zIndex = 1;
                gridItem1.style.msGridColumn = 1;
                gridItem1.style.msGridRow = 1;
                gridItem1.style.msGridColumnSpan = 4;
                gridItem1.style.msGridRowSpan = 1;
                gridItem1.className = 'categoryTitle';
                gridItem1.innerText = currentItem.data.category;
    
                transactionContainer.appendChild(gridItem1);
    
                var gridItem2 = document.createElement("div");
                gridItem2.id = "GridItem2"
                gridItem2.style.zIndex = 1;
                gridItem2.style.msGridColumn = 1;
                gridItem2.style.msGridRow = 2;
                gridItem2.style.msGridColumnSpan = 4;
                gridItem2.style.msGridRowSpan = 1;
                gridItem2.innerText = '3 month average';
                gridItem2.className = 'transactionTemplateDescriptionText';
    
                transactionContainer.appendChild(gridItem2);
    
                var gridItem3 = document.createElement("div");
                gridItem3.id = "gridItem3"
                gridItem3.style.zIndex = 1;
                gridItem3.style.msGridColumn = 1;
                gridItem3.style.msGridRow = 3;
                gridItem3.style.msGridColumnSpan = 4;
                gridItem3.style.msGridRowSpan = 1;
                gridItem3.innerText = decimalFormat1.format(currentItem.data.ThreeMonthAvg);
                //gridItem3.innerText = currencyFormatRand.format(currentItem.data.ThreeMonthAvg);
                gridItem3.className = "currencyText";
                
                transactionContainer.appendChild(gridItem3);
    
                var gridItem4 = document.createElement("div");
                gridItem4.id = "gridItem4"
                gridItem4.style.zIndex = 1;
                gridItem4.style.msGridColumn = 1;
                gridItem4.style.msGridRow = 4;
                gridItem4.style.msGridColumnSpan = 2;
                gridItem4.style.msGridRowSpan = 1;
                gridItem4.innerText = 'Spent so far';
                gridItem4.className = 'transactionTemplateDescriptionText';
    
                transactionContainer.appendChild(gridItem4);
    
                var gridItem5 = document.createElement("div");
                gridItem5.id = "gridItem5"
                gridItem5.style.zIndex = 1;
                gridItem5.style.msGridColumn = 4;
                gridItem5.style.msGridRow = 4;
                gridItem5.style.msGridColumnSpan = 1;
                gridItem5.style.msGridRowSpan = 1;
                gridItem5.style.textAlign = 'left';
                gridItem5.style.marginLeft = '5px';
                gridItem5.innerText = 'Target';
                gridItem5.className = 'transactionTemplateDescriptionText';
    
                transactionContainer.appendChild(gridItem5);
    
                var gridItem6 = document.createElement("div");
                gridItem6.id = "gridItem6"
                gridItem6.style.zIndex = 1;
                gridItem6.style.msGridColumn = 1;
                gridItem6.style.msGridRow = 5;
                gridItem6.style.msGridColumnSpan = 1;
                gridItem6.style.msGridRowSpan = 1;
                gridItem6.innerText = decimalFormat1.format(currentItem.data.spent);
                //gridItem6.innerText = currencyFormatRand.format(currentItem.data.spent);
                gridItem6.className = "currencyText";
    
                transactionContainer.appendChild(gridItem6);
    
                var gridItem7 = document.createElement("div");
                gridItem7.id = "gridItem7"
                gridItem7.style.zIndex = 1;
                gridItem7.style.msGridColumn = 4;
                gridItem7.style.msGridRow = 5;
                gridItem7.style.msGridColumnSpan = 1;
                gridItem7.style.msGridRowSpan = 1;
                gridItem7.style.marginLeft = '5px';
                gridItem7.innerText = decimalFormat1.format(currentItem.data.spendTarget);
                //gridItem7.innerText = currencyFormatRand.format(currentItem.data.spendTarget);
                gridItem7.className = "currencyText";
    
                transactionContainer.appendChild(gridItem7);
    
                var gridItem8 = document.createElement("div");
                gridItem8.id = "gridItem8";
                gridItem8.style.zIndex = 1;
                gridItem8.style.msGridColumn = 2;
                gridItem8.style.msGridRow = 5;
                gridItem8.style.msGridColumnSpan = 2;
                gridItem8.style.msGridRowSpan = 1;
    
                transactionContainer.appendChild(gridItem8);
                 
                var scalingContainerElement = document.createElement("div");
                
                scalingContainerElement.style.msGridRows = "1fr";
                scalingContainerElement.style.display = "-ms-grid";
                scalingContainerElement.style.backgroundColor = "pink";
                
    
               var viewBox = new WinJS.UI.ViewBox(scalingContainerElement);
    
               gridItem8.appendChild(scalingContainerElement);
                
                var myStringOfColumns = "";
                var transactions = Object.keys(currentItem.data.transactions._keyMap).map(function(key){return currentItem.data.transactions._keyMap[key].data});
                for(var i=0;i< transactions.length; i++){
                    console.log(transactions[i].description + ": " + transactions[i].amount)
                    var div = document.createElement('div');
                    
                    div.style.msGridRow = 1;
                    div.style.msGridColumn = i+1;
                    
                    var tooltip = new WinJS.UI.Tooltip(div, { innerHTML: transactions[i].description });
                    
    
                    //div.innerText = transactions[i].amount;
                    //div.style.backgroundColor = random_color();
                    div.style.backgroundColor = SpendGroupColourVariation(currentItem.data.spendingGroup)
    
                    scalingContainerElement.appendChild(div);
    
                    myStringOfColumns += transactions[i].amount + "fr ";
                }
    
    
               
                if (currentItem.data.spendDeficit >= 1) {
                    myStringOfColumns += currentItem.data.spendDeficit + "fr ";
                    var div = document.createElement('div');
                    div.style.msGridRow = 1;
                    div.style.msGridColumn = transactions.length + 1;
                    //div.innerText = "deficit";
                    div.style.backgroundColor = "#4a4a4a";
                    scalingContainerElement.appendChild(div);
                }
    
                scalingContainerElement.style.msGridColumns = myStringOfColumns;
                console.log("myStringOfColumns: " + myStringOfColumns);
    
                transactionContainerWhiteSpace.appendChild(transactionContainer);
                result.appendChild(transactionContainerWhiteSpace);
                return result;
    
            });
        }

     

    Thursday, August 23, 2012 3:37 PM

Answers

All replies

  • Hi S,

    There is an awful lot of code here and not corresponding HTML.

    A couple of questions...

    Have you gotten your ToolTip to work outside of this nested situation?

    Since this is a listview, Kraig's reply in this thread (win-interactive) is probably what you need on the root element.

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/0771142e-bf14-4b21-ba55-bf262b24ddf2

    -Jeff


    Jeff Sanders (MSFT)

    • Marked as answer by Syllogism Tuesday, August 28, 2012 12:53 PM
    Friday, August 24, 2012 7:03 PM
    Moderator
  • Hi Jeff

    I managed to get it working by assigning the win-interactive class to my viewBox div

     

    var scalingContainerElement = document.createElement("div");
                scalingContainerElement.className = "win-interactive";

    You say that I have a lot of code which is true. I'd prefer to have an html template instead but I need to use a javascript template in order for me to populate the dynamic viewBox div. Is there a way to reference the template inside of the javascript so that I don't have to create the whole thing with javascript and then just have my viewBox code insert itself into on of the divs in the html template and return the entire template?
    Tuesday, August 28, 2012 12:53 PM