does anyone know how to create a tooltip on the div. On my page, i have 4 div and I want every time the user mouse over on a div, it will show down the tooltip from the top and after few seconds the tooltip will be automatically hidden..
THANKS
You can use the title attribute:
<div id="myDiv" title="My Tool Tip Text here">Div Stuff</div>
Or take a look at this (A javascript example, does not automatically hide, but could be easily modified to do so):
http://djgdesign.co.uk/display.php?id=47
If you can use javascript and JQuery it's pretty simple, take a look at
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for example
Doing it in pure html and css would be more complicated. You could play with :hover, absolute
positioning and z-index to achieve it.
I would recommend you the TipTip jQuery Plugin its very easy to adapt and also easy to extend. Ask if you need help with this.
Related
I'm trying to use a Bootstrap 3 popover as a relatively positioned element that is inserted in normal document flow, so it pushes down the subsequent DOM elements. That is, I have a big image at the top, followed by a form. When the image is clicked, I want a popover to appear below the image, pushing down the form.
I understand that popovers generally have an absolute position as in the normal use case this makes sense. However, in my particular case, I'd like it to be relatively positioned, but still appear below the element it belongs to. Is there a (non-hacky) way to accomplish this?
You can use simple CSS to override Bootstrap's position:absolute..
.popover {
position:relative;
}
Demo: http://www.bootply.com/129257
Do you have to use the popover for this? Seems like you would be better served by the collapse component: http://getbootstrap.com/javascript/#collapse
And if you don't absolutely HAVE to use Bootsrap for this, jQuery's slideToggle function would accomplish what you're looking for, too: https://api.jquery.com/slideToggle/
I am building a website using a template, which have an stylesheet but it keeps interfering with things I add like Google Maps or other custom things in my website. How can I make the tag
<div id="map_canvas"></div>
not inherit any styles from the stylesheet, so it would only have a height and width.
I am forced to put it at the very end of the document, then use margin-top: -400px and margin-left: 350px to position it.
Try not inheriting this page from the main page where all other CSS are loaded.
Load only CSS file, that you want to apply it to this page.
Use a class on top of your div. For example, if you have a div for google maps the css that you need would look like:
#map_canvas.classNameHere{
position:absolute;
height: whatever you want;
left: whatever you want
width:whatever you want;
}
You define the div, then put .classNameHere or whatever you want the class name to be. Then, in the html, you would tell the stylesheet that this div is part of that class.
<div id="map_canvas" class="classNameHere">
that way, this div will only take the attributes from the defined div in the stylesheet with .classNameHere after the name of the div. If this didn't answer your question, or I misinterpreted it, let me know. Your question is a little bit ambiguous. I don't really know what you already have or what exactly is interfering with it. If it is another div with the same name, then this will probably work. If it is a stylesheet that is constant throughout the whole website, then you really should have a stylesheet for each page, but it will work as long as you make the div with the class a completely new div for each page, so you will have say 4 definitions of the div, each with a different class name. If it is an overall definition such as
*{stuff here;}
then I forget if the class will help. It may just be safer overall to take what is in the
*{stuff here;}
and add it to each div that you want individually.
If you need more help about classes, check out http://thenewboston.org/watch.php?cat=43&number=5 It's a tutorial on this from thenewboston.org. If you need to, start with the beginning of the videos it's only a couple into this set. (It's in the HTML5 tutorials)
If you're having problems positioning it where you want it, you may want to try to put it inside another div. For example, if you wanted it in the sidebar, you would have this CSS for the sidebar
#sidebar{
position:absolute;
left:70%;
top:20%;
}
and the same CSS above for your div, then your HTML would look like this.
<div id="sidebar">
sidebar content here
<div id="map_canvas" class="classNameHere">
any code you need for google maps here.
</div>
</div>
2 more things. First, you should use percentages instead of pixels, so that it will fit on any size screen, unless you're padding the website on each side so that it is all centered. Also, I read your bio on your profile and I'm in the same boat as you. I'm just teenager who likes to code, and we all get confused, so if you need me to explain it more, or I misunderstood your question, let me know.
I'm starting in CSS3, I'm trying to make a menu like this:
http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382
The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.
I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:
CSS:
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML:
Click Me
<div id="box1">test test</div>
that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.
I would use only CSS3
tks to help
If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).
It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).
In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.
Hope that helps,
Dan
This has been already answered you can check out:
CSS3 onclick activate another DIV's animation
This is a very simple technique using the '+' symbol only.Hope you find this useful.
I have a div content that has CSS:
height:700;
overflow:hidden;
What i want to do is i want to create a button that says: expand
so once expand is clicked i want the css for that div to change from:
overflow:hidden TO overflow:visible
so know the div will expand to the height spcified in the css and it would be great if the expand button turns into collapse and does the vise versa when clicked
jQuery is your friend. It is the perfect library for constructing basic DOM events like you've described. Your code might look like the following:
$('#expand-button').click(function(e) {
$('.my_div').css('overflow', 'visible');
});
You can use the jQuery .css function to modify the value of a CSS Property. http://api.jquery.com/css/.
You can also Use jQuery to replace on piece of HTML with another, eg. To change the button.
http://api.jquery.com/css/
I need to center text in a select list. The only example ive found that achieves this is jQuery Mobile. I dont want to use the framework but now that I know its possible, how do they do it?
Thanks
Just you find the class of the Select box and give the
padding:%px or text-align:Center
jQuery Mobile hides the input and creates divs to center the text.