Question

在下面的代码中，将鼠标悬停在文本“悬停鼠标”上时会出现工具提示。

<!DOCTYPE html>
<html>
<body>

<p title="this is tooltip">hover your mouse</p>

</body>

有没有办法使用JavaScript显示工具提示而不悬停鼠标？说在页面加载后我们想要显示一个按钮的工具提示5秒，然后再次隐藏工具提示。

这是我尝试的（基于下面的答案）至少在没有鼠标悬停的情况下显示工具提示，但对工具提示没有做任何事情

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<p title="this is tooltip" id="my-hover">hover your mouse</p>
<script>


    setTimeout(function () {
        $('#my-hover').trigger('mouseover');
    }, 1000);

</script>
</body>
</html>

Answer 1

试试这个

$('element').trigger('mouseover');

这基于脚本

Answer 2

<p title="this is tooltip" id="my-hover">hover your mouse</p> 
    setTimeout(function () {
                $('#my-hover').trigger('mouseover');
            }, 10); 

    $('#my-hover').mouseover(function () {
         setTimeout(function () {
            $('#my-hover').show();}, 500);   

    });

此代码将自动触发鼠标悬停事件。

Answer 3

您可以使用jquery UI Tooltip

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/vendor/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />

        <title>Test</title>
    </head>
    <body>
        <p title="this is tooltip" id="tooltip">hover your mouse</p>

        <script type="text/javascript">
            $( "#tooltip" ).tooltip({ content: "this is tooltip" }).tooltip("open");
            setTimeout(function () { $("#tooltip").tooltip("close");}, 5000);
        </script>  
   </body>
</html>

出现工具提示而不悬停鼠标

3 个答案: