CODEWITHSUNDEEP
jqueryioscordovajquery-uijquery-mobile
Vinod
Vinod

Reputation: 2311

How can we do the tooltip for HTML elements on mobile application using phone gap?

Can any one suggest me good way to use tooltip for mobile application on iOS. I am using phone gap for my application. So Is it possible with jQuery? Can anyone suggest me some good blog for the tap and hold event tooltip?

Upvotes: 1

Views: 2088

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Why don't you use a simple jQuery Mobile popup for this functionality:

Working example: http://jsfiddle.net/Gajotres/pCuh4/

HTML:

<a href="#" class="ui-btn ui-alt-icon ui-icon-info ui-btn-a ui-btn-inline ui-popup-tooltip" data-transition="pop" data-overlay-theme="b" data-position-to="origin" id="hold-me" data-massage="This is a dynamic tooltip massage">Hold me for tooltip</a>
<a href="#" class="ui-btn ui-alt-icon ui-icon-info ui-btn-a ui-btn-inline ui-popup-tooltip" data-transition="pop" data-overlay-theme="b" data-position-to="origin" id="hold-me2" data-massage="This is a second dynamic tooltip massage">Hold me for second tooltip</a>                
<div data-role="popup" id="popupInfo" data-theme="b" style="max-width:350px;">
    <p>This is tooltip</p>
</div>

JavaScript:

$(document).on('taphold', '.ui-popup-tooltip', function(){ 
    $('#popupInfo').find('p').html($(this).attr('data-massage'));
    $('#popupInfo').popup("open",{positionTo: '#'+$(this).attr('id')});
});

As you can see I even made it dynamic.

Upvotes: 3

Related Questions