如何修复一个三角形作为从按钮出来的指针？

Question

这就是我想要实现的目标

我制作了jquery功能，但问题是我无法修复按钮下方的三角形。它通过调整窗口大小来移动。它不是工具提示，这个div需要适合下面的页面，因为我们仍然需要显示新div所隐藏的内容。

<div class="uparrowdiv">
                        <p class="titlep">Here are the tasks that you can do on the Audience page:</p>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p><p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </div>

CSS：

.uparrowdiv{
widht: 100%;
height:100%; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: #eaf0f5;
padding: 25px;
position:relative;
word-wrap:break-word;
display:none;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:relative;
top:-20px; /*should be set to -border-width x 2 */
left:71%;
width:0;
height:0;
border-color: transparent transparent #eaf0f5 transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

JAVASCRIPT：

<script>
    $("#helpbutton_toggle").click(function () {
        var position=$("#helpbutton_toggle").offset();
        $(".uparrowdiv").toggle(200);               
    });             
</script>