Javascript 如何更改工具提示的位置

我的要求是我只需要在左侧显示工具提示，我不希望它显示在右侧。为了实现这一点，我需要做哪些css更改。请在这个问题上帮助我

注意：我不想使用任何类型的插件，只在html（标题）工具提示中进行更改

Html

<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>

在这里，我附上了我尝试过的链接

---

如果没有插件或自定义代码，这是不可能的。您必须使用HTML/CSS实现自定义工具提示，并在悬停时动态显示

---

顺便说一下：您的CSS选择器

.sam[title]

匹配每个具有类“sam”和任何标题的元素，要选择所有标题为“hello”的元素，您必须使用此选择器：

.sam[title=hello]

，正如Fabio所说，无法更改工具提示的位置。但是，我可以建议您自己简单地实现基本JQuery和CSS

首先，用CSS制作工具提示。例如：

#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
} 

之后，您需要使用DIV将其放入HTML中

yourcontent

接下来，您需要制作一个小的jquery脚本

$(document).ready(function(){
    function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
        $(myToolTip).hide();
        $(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
        $(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
    }
    toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}

让我来给你解释一下。您制作了一个div，将您的工具提示文本放置在您想要的位置，并按您想要的方式设置样式。然后在脚本中，我们将其隐藏，以便当它们悬停在对象上时，会显示特定的工具提示。当您离开该对象时，它会像工具提示一样消失

代码相当简单；然而，要理解我所做的，您需要理解基本的Javascript和Jquery。我制作了一个带有参数的函数，您需要为您制作的每个工具提示输入这些参数。假设您制作了一个需要定义的样式化单词，因此需要工具提示。您首先将不需要在CSS文档中定义的类或ID附加到它。你只需要在那里让脚本找到它

在这句话中，chicken是粗体的

Chicken是具有唯一类“.chickentoolject”的对象

接下来，创建一个独特的工具提示div

<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.

---

代码未经测试，但它是简单的jquery，所以我肯定它会工作。如果您感到困惑，请留下评论，我将为您提供更多帮助。

sam[title]这不起作用。查看此帖子，它可能会对您有所帮助。-->使用默认的

标题

属性工具提示，我认为您无法进行自定义定位。但是，我们可以创建自定义工具提示，例如更为更新的版本，它完全符合您的需要。如果你想使用这个，我会添加它作为答案。可以（按照你的建议）编写她自己的css/js，所以不需要“插件”——但同意纯HTML不会起作用。是的，我的解释不清楚。我更新了我的答案以澄清。

<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.

toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);