Question

我的要求是我只需要在左侧显示工具提示，我不希望它显示在右侧。为实现这一目标，我需要做些什么改变？请帮我解决这个问题。

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

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 Link

Answer 1

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

顺便说一句：你的CSS-Selector .sam[title]匹配每个具有类＆＃34; sam＆＃34;的元素。和任何标题，选择所有标题为＆＃34;你好＆＃34;你必须使用这个选择器：.sam[title=hello]

Answer 2

正如法比奥所说，无法改变工具提示的位置。但是，我建议您自己简单地实现基本的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。我创建了一个函数，其中包含您为每个工具提示输入的参数。让我们说你做了一个需要定义的风格的单词，因此需要一个工具提示。您首先附加一个类或ID，它不需要在CSS文档中定义。您只需要脚本就可以找到它。

在这句话中，鸡是粗体。

鸡是具有唯一类＆＃34; .chickentooloject＆＃34;的对象。

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

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

为什么我们这样做？因此，我们还有一个由脚本找到的独特工具提示。剩下的就是剧本了。

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

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

如何更改工具提示的位置

2 个答案: