Question

当工具提示插件仍然在jQuery UI之外时（返回？）

我能够做到这样的事情：

<script type="text/javascript">
    $("#2087051").tooltip({
    bodyHandler: function() { return $($(this).attr("href")).html(); },
    showURL: false
});
</script>
<a href="#208705a" class="directory directory-person" id="2087051" onclick="javascript: window.location='main-display-staff-info.cfm?ouid=254924&telsumm_id=208705';">12992</a>

<div id="208705a" style="display:none;">
    <STRONG>Contact Details: <SPAN CLASS="directory directory-entity">Ms Debra Jones</SPAN></STRONG><BR CLASS="directory" />
    <BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Telephone</LABEL>1653392&nbsp;<STRONG>(Internal)</STRONG><BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Department</LABEL>Manchester University, Deputy Vice-Chancellor (Academic)<BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Role</LABEL>Exec Assistant<BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Building</LABEL>School of Medicine<BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Room No</LABEL>2101<BR CLASS="directory" />
    <LABEL CLASS="staffInfo">Email</LABEL>myemail@email.com<BR CLASS="directory" />
    <BR CLASS="directory" />
    <strong>Click for email/website links</strong>
</div>

但是由于工具提示是jQuery UI的一部分，我上面写的内容已经不可能了。

这就是我使用jQuery UI的方式：

<script type="text/javascript">
    $.widget("ui.tooltip", $.ui.tooltip, {
        options: {
            content: function () {
                return $(this).prop('title');
            }
        }
    });
</script> 
<a href='#' class='208705 directory directory-person ' onclick='javascript: window.location='StaffInfo.html?id=208705';'>1234534992</a>
<script type='text/javascript'>
    $(function () {
        $('.208705').attr('title', $('#208705a').remove().html());
    });
</script>
<div id='208705a' style='display:none;'>
    <div>
        <strong>Contact Details: <span class='directory directory-entity'>Ms Debra Jones</span></strong><br class='directory' /><br class='directory' />
        <label class='staffInfo'>Telephone</label>12122992<br class='directory' />
        <label class='staffInfo'>Department</label>Manchester University, Deputy Vice-Chancellor (Academic)<br class='directory' />
        <label class='staffInfo'>Role</label>Exec Assistant to Deputy VC Academic<br class='directory' />
        <label class='staffInfo'>Building</label>School of Medicine<br class='directory' />
        <label class='staffInfo'>Room No</label>233310<br class='directory' />
        <label class='staffInfo'>Email</label>myemail@email.com<br class='directory' /><br class='directory' />
        <strong>Click for email/website links</strong>
    </div>
</div>
<script type='text/javascript'>
    $(function () {
        $(document).tooltip();
    });
</script>

这就像使用jQuery UI一样：http://i.imgur.com/ulkzyEy.jpg

这就是使用原始插件的样子：http://i.imgur.com/cyDwPM9.jpg

我发现与新的工具提示相比，我可以更好地控制旧工具提示的样式。从第二个屏幕截图中可以看出，我的工具提示是使用在我的一个css文件中设置的正确字体css。

任何人都可以建议我可以做什么，所以当通过jQuery UI使用工具提示时，我可以更好地控制样式？

由于

如何设计jQuery UI工具提示？

0 个答案: