How to change the position of a Tooltip - javascript

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

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]

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.

Related

Relocating a div

I am trying to relocate a div - the expandable panel with the header 'Why Bother', so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.
(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).
http://dev.assessmentday.co.uk/index.htm
I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?
If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it's SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.
Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.
Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:
$(document).ready(function(){
$('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});
Here is a working example:
http://jsbin.com/ezizix/1/edit
I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:
jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');
You can achieve what you want with absolute positioning. I don't know if the dropdowns will work after this, but it is worth a try.
Add this to the existing contentLeft css rules
.contentLeft {
padding-bottom: 90px;
position: relative;
}
Add this to the "special" div
.specialdropdownPanel {
bottom: 20px;
position: absolute;
}
Use jQuery before to do this Example on fiddle
$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));​​​​

jQuery Mobile, transparent black overlay effect

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/

CSS for dynamic inserted elements

Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out

Is linking a <div> using javascript acceptable?

I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.
You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.
Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.
It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)
It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.
If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}
HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.

Ajax auto-complete, with bespoke popup location

I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}
It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}
Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance

Categories