How to change the position of a Tooltip

Question

My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.

Note : I don't want to use any kind of Plugin, to do changes only in 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;
}

Here I have attached the link that i have tried

JsFiddle Link

Answer 1

This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.

By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]

Answer 2

As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.

First, make your tooltip in CSS. For example:

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

After that, you'll need to put it in HTML using a DIV.

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

Next you'll need to make a small jquery script.

$(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)
}

Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.

The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.

In this sentence, chicken is bold.

Chicken is the object with a unique class of ".chickentooloject".

Next you make a unique tool tip div.

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

Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.

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

The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.