如何更改工具提示的位置

Question

我的要求就像我只需要在左侧显示工具提示，我不希望它在右侧显示。 为了实现此目的，我需要做哪些CSS更改。 请帮我解决这个问题。

注意：我不想使用任何类型的插件，仅在html（title）tooltip中进行更改。

HTML

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

CSS

.sam{
    width:200px;
    margin-left:120px;
    margin-top:25px;  

}

.sam[title] {
    position:fixed;
top:100px;
left:50px;
}

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

JsFiddle链接

Answer 1

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

顺便说一句：您的CSS选择器.sam[title]匹配具有类“ sam”和任何标题的每个元素，要选择所有带有标题“ hello”的元素，您将必须使用以下选择器： .sam[title=hello]

Answer 2

正如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中。

<div id="tooltipbox">yourcontent</div>

接下来，您需要制作一个小的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附加到该类或ID。 您只需要在那里，脚本就可以找到它。

在这句话中， 鸡肉是粗体的。

鸡是具有“ .chickentooloject”独特类的对象。

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

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

我们为什么要这样做？ 因此，脚本还提供了一个独特的工具提示。 其余的取决于脚本。

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

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