I have a page with a text and some words in the text can change dynamically. These words have an element and should have a tooltip. When the user hovers the word (or I guess on a touch device clicks it), a tooltip should be generated using generateSpecialMarkupElement($(element).text()). Once the HTML has been rendered to the DOM another JavaScript function has to be called replaceMarkupHTML().
I don't have control over these functions unfortunately.
Now I'm wondering if there is a simple way in bootstrap get this done. For instance a before event to run the first function and an after event to call the second one.
Here is a simple example text and simplified versions of the functions:
http://jsfiddle.net/8aqz5auk/1/
So is there a bootstrap-way of hooking/intercepting this kind of thing? Or is there maybe another simple way it could be done?
Edit: I just had an idea. When bootstrap shows a tooltip, it seems to inject an element into the DOM. The interesting part is the container with the class 'tooltip-inner'. So I tried to listen on the body for new elements matching '.tooltip-inner' to be injected and whenever that happens I try to manipulate it:
$('body').on('DOMNodeInserted', '.tooltip-inner', function () {
var el = $(this)
el.html("") // empty the tooltip element
el.append(generateSpecialMarkupElement(el.text())) // insert the generated markup element
replaceMarkupHTML() // replace the markup element with normal html
});
Unfortunately it doesn't work. It just throws a a million errors and the site freezes when I try it.
Edit 2:
Thanks to Chris Barr, I got a little bit closer: http://jsfiddle.net/8aqz5auk/2/
But the tooltip doesn't always show up and the position of the tooltip seems to be kind of wrong (shows up on top of the word, rather then next to/above/below/...).
You might want to look into the tooltip events listed in the docs: https://getbootstrap.com/docs/3.3/javascript/#tooltips-events
$('.elements-with-tooltips').on('show.bs.tooltip', function () {
// do something…
})
You can run a function: before being shown, after being shown, before hiding, after hiding, and when the element is inserted into the DOM.
Related
I have this function:
function main() {
var bottomArea = document.getElementsByClassName("bottom-area");
for (var i = 0; i < bottomArea.length; i++) {
var showDialogLink = document.createElement("a");
showDialogLink.innerHTML = "link";
showDialogLink.onclick = function(){showSelect(this);return false;};
bottomArea[i].insertBefore(showDialogLink, bottomArea[i].childNodes[3]);
}
}
So far the code works just fine. When I click the newly created link, it calls showSelect(this) function just fine.
The problem is there is another userscript/browser extension (which I don't have access to - it's not mine), which basically clones whole another div in which 'bottom-area' div is nested. This is all right too, but the problem is that it doesn't clone my function trigger and those newly cloned instances (I'm not really sure what is their nature) of that link do no longer trigger showSelect(this) function. Only the first one created by my userscript does.
Is there some way in which I should add my function trigger on my link, that will stay even after cloning/copying?
EDIT: I'll just edit to show html tree:
This is at the beginning:
<div>
<div class="bottom-area"></div>
</div>
My userscript adds a link with an onclick eventlistener on the 'a' tag:
<div>
<div class="bottom-area"><a>link</a></div>
</div>
The other userscript basically clones it (there is a textarea inside the div and its value gets cloned too), but without the eventlistener, so clicking on the cloned links no longer triggers my function.
EDIT2: If it helps, the userscript I'm creating is a reddit userscript. I'm adding small functionality to commenting and adding a link right next to the 'reddiquette' link under the comment text field. That works with the pre-generated text field. However when I click 'reply' down the comment tree, the whole div together with text field, submit button and my link gets cloned under the comment I'm replying too, but my link no longer has the function trigger on itself.
The easiest solution may be to simply use HTML event attributes (instead of addEventListener), such as <a onclick="dostuff();">link</a>, because the attribute should be preserved during 'cloning'. See this fiddle (tested in Firefox 40) for an example.
Letting the code in the onclick attribute interact with your userscript may be be a little difficult because it runs in a different JavaScript environment. Luckily there's plenty of possible workarounds, depending on your exact needs.
I am trying to use this code to display some data when the mouse is over that link:
<span id="ssd" onmouseover="this.T_WIDTH=210;this.T_TITLE='(0/0) mqe= ';"><a href='http://en.wikipedia.org/wiki/Decision_tree_learning'>http://en.wikipedia.org/wiki/Decision_tree_learning</a></span><br/>
Do you see something wrong because I can't make it work.
Let's get away from this DOM level 0 stuff:
var spSsd = document.getElementById("ssd");
spSsd.addEventListener("mouseover", function () {
this.style.width = "240px";
this.setAttribute("title", "(0/0) mqe");
});
I assume your this.T_WIDTH=210 was supposed to set the width of the span, and this.T_TITLE=(0/0) mqe was supposed to set the title? The code above should do that, just note that you need to set your span to display:block for this to work, since inline elements don't really have a width.
Just make sure you put this script at the bottom of your body; executing it in the head will give you a null error, since the span ssd will not have been created yet. Or if you're using jQuery, you could put it in the document.ready function.
Some suggestions try the following
jQuery Bubble Popup
JQuery Popup Bubble Question on Stackoverflow
Has anyone figured how to manipulate the AdUnit element from google?
E.g. hiding, etc.?
So far I can change opacity and move it vertically, but only before the ads load.
Calling setPosition(null) on the AdUnit will remove it from the map. See http://code.google.com/apis/maps/documentation/javascript/reference.html#AdUnit
So I found solution myself:
var t=setTimeout("closeAdd()",2000);});
function closeAdd(){
$('#add').append('<span id="close_but">Close</span>');
$('#close_but').css('position','absolute');
$('#close_but').css('color','blue');
$('#close_but').css('top','0px');
$('#close_but').css('left','425px');
$('#close_but').click(function(){
$('#add').hide();});
}
Using jQuery I am adding the 'Close' span to the node containing the add. The actual placing depends on the format of the add unit, here I have "AdFormat.BANNER". Anyway, I also attach the click handler to the Close span which hides the add containing element.
BTW. delaying the manipulation is necessarry as google does strange manipulations with a node and untill the adds load completely.
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage
Scenario:
Image with several areas mapped.
A list of text on the page
Desired functionality: When I mouseover the different pieces of text in the list, corresponding areas in the mapped image will become highlighted.
Does anyone know of a good javascript tool that can do this?
I have found a jquery plugin (map hilight) that will highlight the section of the image as you move your mouse over the image itself. I am looking for the next step - triggering the highlights from a source outside of the image.
I looked at the source code for the plugin you mentioned and it should be fairly easy to extend it so that it will do what you want it to do, here a few hints:
Line 127-136 of jquery.maphighlight.js:
mouseover = function(e) {
var shape = shape_from_area(this);
add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
};
if(options.alwaysOn) {
$(map).find('area[coords]').each(mouseover);
} else {
$(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
}
This is where all the event magic happens. The mouseover function is used to highlight an area.\
In your code you could try to find the area coordinates you want to highlight by doing something like this:
$(map).find('#id_of_the_area[coords]').each(moseover);
Where id_of_the_area would be an id that you gave the <area> tag that you want to highlight.
If you put that into a function you can call that from wherever you need it from.
Edit:
Based on your question in the comment, here are some more pointers:
The functions to highlight/unhighlight an area could look something like this:
function highlight(e) {
$(map).find('#id_of_the_area[coords]').each(moseover);
}
function unHighlight(e) {
clear_canvas($(canvas));
}
In this example id_of_map and id_of_canvas would be the id of the map and canvas elements.
The scope of the mouseover or clear_canvas functions and map or canvas variables might be an issue there. You need to be careful on where to place this code. I'd suggest reading up on jquery plugins a bit before you try to add this functionality.
In jquery you can attach events to any html element. Like this:
$('#id_of_element').mouseover(highlight);
$('#id_of_element').mouseout(unHighlight);
id_of_element would be the id of the element that you would like to trigger the highlighting.
Hope this helps!
while this is not super-elegant, you can trigger the mouseover event of the area element in question manually:
<a href="..." onmouseover="$('#certain-area')
.trigger('mouseover');">link text</a>
Same holds for mouseout. Of course, this is better done unobtrusively than using onmousover and onmouseout.
Highslide is not exactly what you asked for, but worth a look.