CODEWITHSUNDEEP
c#htmljtemplatesjtemplate
Chee mun Low
Chee mun Low

Reputation: 138

dynamic tooltips doesn't work

I am trying to create a dynamic tooltips to my application however this is not working, can I have some idea?

below is the my code that try to retrieve tools tip through java scripting.

<input type="text" tooltipid="testfamily" onclick="tooltipshow(this);" id="family"
    value="family " />

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var data = {
    name: "enter your name",
    family: "enter your family",
    testfamily: "enter your family",
    uc1_txtname: "enter your name for Control 1 (User Control1)",
    uc2_txtname: "enter your name for Control 2 (User Control2)"
}
function tooltipshow(e) {

    var Tip = $("<div class='dinamictip'></div>");
    Tip.text('');

    var ToolTip = $(e).attr('tooltipid');
    if (ToolTip != null) {
        var offset = $(e).offset();
        var height = $(e).height() + 10;
        Tip.text(data[ToolTip]);
        Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height);
        Tip.appendTo('body');

        Tip.remove();

    }
};

Upvotes: 0

Views: 157

Answers (1)

Roimer
Roimer

Reputation: 1459

I didn't tested your code, but probably the culprit is Tip.remove();: you are deleting the tip as soon as you create it.

Try this change in your tooltipshow function: the first time this code executes, it won't find the tool tip's div, so it will create it and will add it to the body (hidden, for now). Then, the next time you call the code, it will find the old tool tip and will reuse it. 

function tooltipshow(e) {

    var Tip = $("#mydinamictip");
    if(Tip.length==0){
        Tip = $("<div id='mydinamictip' class='dinamictip'></div>");
        Tip.hide().appendTo('body');
    }

    Tip.text('');

    var ToolTip = $(e).attr('tooltipid');
    if (ToolTip != null) {
        var offset = $(e).offset();
        var height = $(e).height() + 10;
        Tip.text(data[ToolTip]);
        Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height);
        Tip.show();

    }
};

Upvotes: 1

Related Questions