Javascript 弹出工具提示xhtml和js文件

我的代码如下示例所示：

<f:view xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org" xmlns:esg="http://java.sun.com/jsf/composite/dataTable" onkeypress="return submitButton('NO_SUBMIT',event)">
<h:outputScript name="tooltip.js" target="head" />





<h:panelGrid columns="1" styleClass="" rendered="#{test==null}">
    <h:outputText value="#{test}" />



</h:panelGrid>

    <t:panelGrid columns="8" styleClass="" columnClasses="identLabel,identVal,identLabel,identVal,identLabel,identVal,identLabel,identVal">

        <h:outputText id="l_id_first" value="#{msg_part.first}" /> 

        <h:outputText value="#{con.first}" />

        <h:outputText id="l_id_sec" value="#{msg_part.sec}" />
        <h:outputText value="#{con.sec}" />

</t:panelGrid>



</f:view>

我希望xhtml页面的加载方式是，当我将鼠标悬停在msg_part.first或msg_part.sec条目上时，会出现一个工具提示，显示上面数组的两个值

我无法让它在没有任何额外id、输出框或其他库的情况下工作

工具提示必须显示在光标周围

有什么想法吗

提前谢谢

流浪汉

// Array

    var arrayinput = [ {
        id : "l_id_first",
        text_DE : "Tooltip_first",
        text_EN : "Tooltip_first",
        display : "1"
    }, {
        id : "l_id_sec",
        text_DE : "Tooltip_sec",
        text_EN : "Tooltip_sec",
        display : "1"
    }];

//Function
    function arrayscanner(arrayvar, scanid) {

        arrayvar
                .filter(function(item) {

                    if (item.id == scanid) {
                        filteredArr.push("Ger: " + item.text_DE + " || Engl: "
                                + item.text_EN);
                    }
                })
        outputtest = filteredArr.toString();        
        alert ('out1: ' + outputtest);
        return;
    };