In my javascript file there is,
var htm = '<div style="overflow:hidden;height:24px;width:150px;" onmouseover="tooltip(this)">' ;
function tooltip(sp)
{
sp.title = sp.innerHTML;
}
So on mouse over a text the tooltip is displayed.But the tool tip does not stay longer. meaning the position is not fixed.
Can the code be modified such that mouse over should be done on the text and the tool tip also........
If all you want is a "built-in" tooltip, there's no need at all to do it dynamically. Just code the HTML element with a "title" attribute containing the text you want. The browser will show the tooltip on mouseover. If you want something fancier, you should probably look at a jQuery add-on (or some other framework).
Here is a standards based tooltip that will serve you well.
<div title="This is your tooltip">Some Text</div>
If you then wish to add on top of this, you can use the title attribute to get the text you want to display as a tooltip, which is how various tooltip plugins work.
Related
I have an issue with jquery tooltip. Basically, the issue is: after several updates of the tooltip content, the tooltip is not shown again when I mouse hover the element when the tooltip was initially associated with.
To be more specific:
My tooltip is associated with an element <div class = "tooltipShow">
The content of the tooltip is updated every time by using:
$('.tooltipShow').tooltip("option", "content", newContent)
Every time after this step, I can see the content of tooltip changes by doing
console.log($('.tooltipShow').tooltip("option")).
The return is an object with newContent, position and etc.
However, after several updates, the tooltip simply just not show again when I mouse hover <div class = "tooltipShow"> although I can see that this element still has tooltip plugin associated with it and even the tooltip content is updated one. It seems like the tooltip is never triggered again since I cannot see any tooltip element is added when I mouse over <div class = "tooltipShow">
My jQuery version is "1.8.0"
I will be much appreciated if anyone can help me out~
Say I have the following text:
this is some example c|ode
The pipe symbol is where the cursor is in a nicEditor div. nicEditor has a function to get the position of the cursor "getRng()".
However getRng() doesn't get the position of the cursor including HTML, and as far as I can see no such function exists (correct me if I'm wrong).
The code in the nicEditor div might actually be:
<span style='font-weig|ht: bold;'>this i</span>s some example code
You can see my problem. I'm trying to insert something into the nicEditor div and it gets inserted into the middle of a HTML tag.
My question is this: Is there a way to convert the position of the cursor with the HTML tags included? Or is there any other alternative solution?
I worked it out in the end, it wasn't an easy solution. I had to write a state machine which has four states "Text"=>"HTML"=>"String"=>"Character". Basically I wrote jQuery plugin which takes the string and the position and shifts accordingly.
I am building a feed reader and on my first page I show a lot of post previews. A user has the option to click on the title and visit the source link.
In addition I would like to give them the option to click on a small icon, like a plus sign + to view the rest of the post preview in my page.
As you can see on http://jsfiddle.net/BLUzJ/ I have set a max-height and overflow:hidden if the content of post preview is more than this. 95% of the post previews have a lot of text hidden.
For now the max-height is set to 10.3em as below
#text {
max-height:10.3em;
overflow:hidden;
}
When an icon in the post (I guess there will be in a corner of the post preview) is clicked, the max-height changes to allow user to read the rest.
My application is written in PHP, and I get the title, image, content from RSS feeds.
I think that this is a jQuery, JavaScript solution but I do not know how to do it.
Thank you for your ideas and examples.
Using jquery, since you added that tag: http://jsfiddle.net/r4F8Q/3/
added an element with class .toggle, which could be your icon
added css rule for #text.expanded which removed max-height
jquery adds/removes class expanded from element #text
Here is a starting fiddle. It expands on clicking the text. You would obviously have to do some more work to have a trigger that expands/collapses the section.
http://jsfiddle.net/BLUzJ/10/
To show all of the content of the post, you can set the max-height of the element whose icon has been clicked to auto. Once you get a hold of the element that you wish to expand (either by using document.getElementById("id") or by traversing the DOM), you can set this property by doing the following:
x.style.maxHeight = "none";
You can set this as the onclick event for the expand icon, if you wish. Do note that this will not animate the expansion; for that you should probably use something like jQuery.
EDIT: Updated the jsFiddle with a simple example, which expands when the title is clicked. http://jsfiddle.net/BLUzJ/6/
How can I show text on top of my images when a mouse moves over them.
For example you see on youtube you have an add to playlist button on the thumbnails. How can I setup something similar but for a like button.
I am not looking for a tooltip. I want the text to shown on the image when the mouse is hovered over it.
Put each of your images inside a seperate "container" div. These divs should have the position: relative attribute. Give all the images the class name 'singleImage' Put another div inside of this each of the "container" divs with position: absolute and display none. Set the class name for these divs to 'toolTip'. This div will be the tooltip. Put a title attribute on your images. You will need jQuery to rig up the hovering or plain javascript if your feeling adventurous
In jQuery you would do something like:
$('.singleImage').mouseover(function(){
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.singleImage').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
you are looking for tipsy I think
The functionality you are referring to is called a "tooltip". There are plenty of different plugins ciruclating out there that you may be able to utilize. Without having specific code, it will be hard for anyone to present a tailor-made solution.
I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.
$("#TableID td").hover(function(){
//ifCellThatIWant
$(this).append("<span>Message that was brought in</span>");
},
function(){
$(this).children().remove();
});
The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pretty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.
Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.
EDIT:
Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.