【HTML5/CSS】pタグのtitle属性がipadで表示されない対応方法（ツールチップ)

pタグでtitleを設定すると、パソコンでは、titleが表示されます。
（ツールチップ）
しかし、ipadではtitleが表示されません。
どうやら、ipadだとtitle表示すると、タッチしているので、問題なのだそうです。

そこで、タッチ時(mouseover)に、divタグをbodyに追加して、擬似ツールチップ表示します。

その例を紹介します。

１、HTMLとJavaScriptでタイトル設定

(1) HTML
divタグで、id =cpair_details_td1を定義する

　<div id="cpair_details_td1"></div>
               
(2) Javascript（Typescript)
jQueryで、、id =cpair_details_td1にpタグを追加する。
tittleを定義して、ツールチップ表示する

   　 $('#cpair_details_td1').append($('<p class="td_result1" title="総決済損益額">').text("総トレード損益"));


２、mouseoverとdivタグ追加
id=td_result1のmousemoveイベントとmouseoutイベントを定義して、
ipadでタッチしたときの処理定義する。

id_bodyはbody要素のidです。
body要素にdiv要素(id=ptips）を追加して、ツールチップ表示します。
InfoBackgroundはtitle表示時のシステムの持っている背景色です。

               $(".td_result1")
                    .mouseover(function (e) {
                        var str = $(this)[0].title;
                        $("#id_body").append("<div id='ptips'>" + str + "</div>");

                        $("#ptips")
                            .css("position", "absolute")
                            .css("background", "InfoBackground")
                            .css("top", (e.pageY) + 15 + "px")
                            .css("left", (e.pageX) + 15 + "px")
                            .css("display", "none")
                            .css("filter", "alpha(opacity = 85) ")
                            .css("opacity", "0.85")
                            .fadeIn("fast")
                            ;
                    }).mouseout(function () {
                        $("#ptips").remove();
                    });