autoload bootstrap tooltip - javascript

I have simple question, the bootstrap tooltip works on particular selector[tag] on hover[mouseover] as default i.e you need to hover on the tag to activate the tooltip or make it appear. I want to make it appear in an input tag when i left the tag or when cursor leaves that input tag automatically, not on hover[mouseover]...
The question at hand is by default the tooltip works on following
('selector').tooltip('show');
Is there anyway to make it according to my specifications above

Something like this
$('input').tooltip({
trigger: 'manual'
}).on({
blur: function() {
$(this).tooltip('show');
},
focus: function() {
$(this).tooltip('hide');
}
});
Example here - http://jsfiddle.net/UPRbm/

Try this:
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'manual'});
$('#example').blur(function() {
$('#example').tooltip("show");
setTimeout("$('#example').tooltip('hide');", 1000);
});
});
}
}

Related

Creating my custom tooltip using jquery plugin

Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers

How can I edit this Javascript without blocking functionality?

So I inherited some code that I am trying to customize and I've hit a roadblock. I believe this little piece of code is the issue:
jQuery(function($){
var photos = [
'cover/001_final.jpg',
'cover/002_final.jpg',
'cover/003_final.jpg',
'cover/004_final.jpg',
'cover/006_final.jpg',
'cover/007_final.jpg',
'cover/008_final.jpg',
'cover/009_final.jpg',
'cover/044_final.jpg',
'cover/085_final.jpg',
'cover/123_final.jpg' ]
$.backstretch(photos[Math.floor(Math.random() * photos.length)]);
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});
$('.nav-link a')
.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); })
.click(function(){
$(this).removeClass('hover');
});
});
If I understand correctly, this script is randomly loading the backgrounds and then stretching the images and then loading the menu...
..I would like to use the menu feature on another page that does not require a stretched background, how can I remove the dependency on the background loading/stretching and just load the menu?
Thanks in advance.
Try using :
$(function () {
$('body').addClass('load');
});
Instead of :
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});

nicEdit - HTML editing on a Bootstrap popup

I'm having a problem when I open a nicEdit instance inside a Bootstrap popup.
I can edit my text just fine, the only thing that isn't working properly is the edit HTML popup. The HTML shows up fine on the textarea but I can't click or edit it. The other buttons on that popup (close and submit) work fine, so the only problem is the textarea.
I've tried setting a higher z-index for the textarea, but that didn't help.
Anyone had this problem?
EDIT: Sorry, here is the fiddle http://jsfiddle.net/MXkY3/1/
The HTML button is not visible because the image file isn't included, but it's the only button available.
I'm initializing the editor normally:
$(document).ready(function () {
new nicEditor({
buttonList: ['xhtml']
}).panelInstance('new_page_content18');
});
And the CSS for the popup is the Bootstrap standard. But you can see that the popup generated after the HTML click isn't editable.
EDIT2: The problem isn't with showing the HTML popup, the problem is editing the HTML inside the textarea of that popup. I can't even select text.
You have to create a new event in the modal and validate html NicEdit.
//...
$('.div-element-modal').on('hide.bs.modal', function (e) {
validarNicEditorEnModalOff();
});
$('.div-element-modal').on('shown.bs.modal', function (e) {
validarNicEditorEnModal();
});
$('.div-element-modal').modal('show');
//...
function validarNicEditorEnModalOff() {
$(".nicEdit-selectControl").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectTxt").each(function() {
$(this).unbind("click");
});
$(".nicEdit-pane").each(function() {
$(this).parent().css("position", "absolute");
});
}
function validarNicEditorEnModal() {
$(".nicEdit-selectControl").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectTxt").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectControl").each(function() {
$(this).click(function() {
setTimeout(function() {
$(".nicEdit-pane").parent().css("position", "fixed");
}, 200);
return true;
});
});
$(".nicEdit-selectTxt").each(function() {
$(this).click(function() {
setTimeout(function() {
$(".nicEdit-pane").parent().css("position", "fixed");
}, 200);
return true;
});
});
}
Regards

Set default image after click with jQuery

I want just when I click on the image I see the new image and just after the click I want the new image changes with the default one, but I have to drag the mouse to see the default image but I don't want that.
This is my code:
$(document).ready(function(){
$(".img-button").live('click', function () {
$(this).attr("src","images/pressed.svg");
});
});
If you only have one image, I suggest you give it an ID instead of (ab)using the classname.
If you have several and use the same image for all, then change $("#myImage") below to $(".img-button")
Toggle
$(document).ready(function(){
$("#myImage").toggle(
function() {
$(this).attr('src','images/pressed.jpg');
},
function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap after leaving
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
});
$('#myImage').on("mouseleave",function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap half a sec after pressing
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
setTimeout(function() {
$('#myImage').attr('src',"images/default.jpg");
},500);
});
});

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});
Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);
If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);

Categories