How to inspect JQuery UI tooltip? - javascript

I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one would be hovering over an element to keep the tooltip displayed and second would be using the Inspector and build the style. But I only have one mouse and as soon as it moves off the element, the tooltip disappears. Checking the ":hover" state in Inspector doesn't help. the tooltip disappears on mouse out.
I am using Chrome, but any trick in any browser would do.

My working solution in Firefox:
1. hover over tooltip (tooltip is shown)
2. hit CMD-Option-K (OSX) or CTRL-Shift-K (Windows), to open "Web Console"
3. type "debugger" (this will stop JS execution, so tooltip won't disappear)
4. open "Inspector" Tab, search for .ui-tooltip
5. edit as necessary. note: changes to CSS will work immediately, even if execution of JavaScript is stopped

I found a workaround how to temporary inspect it :
just implement hide settings where you hookup the tooltip logic:
hide: {
effect: "slideDown",
delay: 20000
}
This gives you 20 sec time to inspect it. If you need more time then increase the "delay" attribute.
Here is my working code for page jquery tooltips:
$(function() {
$(document).tooltip({
tooltipClass: "jqueryTooltip",
content: function() {
return $(this).attr('title');
},
hide: {
effect: "slideDown",
delay: 20000
}
});
});
After you are done with the inspection just remove the delay and you are done.
Note: I am using custom class "jqueryTooltip" to style the tooltip after inspection.

In Chrome follow the following steps:
1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).
2- Choose Sources:
3- On the right side, you found accordion, Open "Event Listener Breakpoints"
4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action".
5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want.
Note: If you hovered other item by wrong, you can resume the execution of code by clicking resume (blue button), and then try hover again.
If you want to return to the normal execution of code, Deselect the "mouseout" event, and click resume (blue button).
In Firefox the same, the difference in "Sources" tab is named "Debugger".

I'm late to the party, but there is actually a simple way to accomplish this.
In your browser's dev console, use jQuery to target the tooltip as follows:
$('.selector').tooltip('open');
In my case, for instance, I have a class .grey-tooltip on my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.
Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.

the easy way is to pause js with F8 when tooltip is shown

It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.

If you open the developer tools in the newest Google Chrome you should see the elements tab is selected. On the element you have to hover on you just right click on it and open the 'Force element state' menu to select the :hover option.

You can't change a jQuery tooltip's styling in a browser's inspector, because as you are saying it is removed from the DOM on mouseout.
However, with the following code this is what I did to change to change the styling:
$("#myElement").attr({
title: "my tooltip text"
}).tooltip();
$("#myElement").tooltip({
// the .tooltip class is applied by default anyway
tooltipClass: "tooltip"
});
Type debugger; in the JavaScript, before the previous code
In Firefox, hit F12 to open Firebug (download it if you don't have it)
Select the Script tab and click Reload
Now that the debugger is activated, highlight
$("#myElement").tooltip from the 2nd code block (without the parentheses), right-click the highlighted text, and
select Add Watch
Under the Watch tab in the right window, click on +
next to $("#myElement").tooltip to expand all the properties
Under that expand Constructor, then DEFAULTS, and then
template to see the HTML that the tooltip is made of
This is then the exposed HTML structure of a jQuery tooltip:
<div class="tooltip">
<div class="tooltip-arrow"> ... </div>
<div class="tooltip-inner"> ... </div>
</div>
...and now you can apply CSS, something like this:
.tooltip {
background-color: blue;
border: 2px solid black;
border-radius: 5px;
}
.tooltip-arrow {
/* hackery, placing the arrow where it should be: */
margin-bottom: -7px;
}
.tooltip-inner {
/* hackery, making all browsers render the width correctly: */
width: 300px;
min-width: 300px;
max-width: 300px;
/* hackery, removing some unknown applied background: */
background: none;
background-color: none;
color: white;
text-align: center;
}
All the "hackery" mentioned in the CSS above is what I had to do to get Bootstrap to play nicely with jQuery (they both have a tooltip, which can conflict with each other -- see https://stackoverflow.com/a/19247955 for more info).

Here is what I did:
jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip({close: function( event, ui ) {
console.log(jQuery(ui.tooltip[0]).html());
}});
And the console content was:
<div class="ui-tooltip-content">Hello</div>
Also, I placed a breakpoint on the console.log function and then examined the page structure before the </body> end tag, and there was something more:
<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>
It was possible to change the tooltip styling on the fly using Inspector (tested in Chrome).

Related

Input element click on mobile device browser behaves differently than in Chrome device rendering

I have a hard to debug issue where a click on an input element behaves completely different on my Samsung S10 than in my desktop Chrome browser (also when using device testing tools).
Here's how to test:
on a small mobile design (max-width: 56em) a blue filter bar appears at the bottom of the screen
Click it to show all filters, a popup menu appears (you can go back to results by clicking button "Bekijk resultaten")
Click "+ Specificeer" at the bottom of that screen
In the small range specification popup that appears click the first input element (placeholder="van")
In Chrome on desktop the user can now enter a number. Also when I use Chrome device debugging tools and set it to iPhoneX, Galaxy S5, Galaxy Fold rendering etcetera it works just fine.
But when I load my live site on my Galaxy S10 in the Chrome browser, the moment the user clicks the input element to enter a number, the rest of the filter popup menu is hidden, and it only shows part of the range specification popup. Scrolling of the page is completely disabled. I'm thinking that certain events are handled differently, but I can't figure out which ones and why.
I tried monitoring events using monitorEvents(window,"click");, but no click events show
Logged events via Performance tab, but could not find the culprit
I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.
UPDATE 1
The issue was the mobile virtual keyboard that trigger the resize method.
Fixed it by checking for width change:
var initialWidth = $(window).width(), initialHeight = $(window).height();
window.addEventListener('resize', function () {
if ($(window).width() != initialWidth) {//the width was changed
}
})
Well, I've played around. illusion is totally right.
I've copied some styles from .filters .mobile class to .filters_TEST
.filters_TEST{
&.active{
height: auto;
flex-grow:1;
overflow: auto;
opacity: 1;
z-index: 100;
padding: 0;
background-color: #FFF!important;
min-height: 100vh;
.modal_container{
background-color: #fff;
overflow: auto;
overflow-x: hidden;
position: relative;
width: 100%;
height: 100vh;
overflow-y: hidden;
#mobilefilters{
display:block;
}
}
}
}
added test button:
<span class="js-callmodal display-mobile-only">CALL MODAL</span>
and on button click added new class to .
$('.js-callmodal').on('click',function(){
$('.filters_TEST').addClass('active');
});
now when you click:
CALL MODAL -> Specificeer -> input
modal stays in place;
to truly fix your problem you should search what removes .mobile class when input is triggered.
I guess the code should be somewhere in file: _genfuncs.min.js?v=90
While debugging, I found that when the input is in focus and the keyboard pops up, that instant .mobile class is removed from section.filters. You'll have to see for any event handler that removes the .mobile class on any event. Secondly, after the bug was encountered I again added the removed .mobile class manually to section.filters and the modal was back in place working properly. After clicking "Specificeer" it gives rise to another bug, where the main page becomes unscrollable. Also at the same instant there is another error TypeError which could possibly be the cause of the other bug...

Fix issues jQuery UI Dialog Box

here's the link to my dialog (click here)
I tried to fix the below in order to referring to the official website dialog (click here) but I can't find how to do that:
I need to :
bring back the cross sign (x) at right side of the dialog,
and add the small exclamation image,
change background color of the title frame only,
and buttons (Delete all items & Cancel), the frame that surrounds them must be like here (with space "High, Down, Left, Right").
Looking at the chrome dev tools, it seems you image files for icons are not loading.
Sort this out and this will fix your icon problems (close button and exclamation image).
Set what ever color you want using following css.
.ui-draggable .ui-dialog-titlebar {
background: red;
}
For Dialog buttons use following css
.ui-button {
padding: .4em 1em;
}

Chrome extension popup resizability by user

I'm currently designing a Chrome Extension
and I want to make the size of the popup itself changeable by user.
popup.html is the content that goes inside the popup.
So in order to do something with the popup itself,
I think I'll have to work with the codes in popup.js,
but before starting, I want to know if this is possible.
Thank you in advance.
Besides #wOxxOm's answer, you could also add a div inside popup body and set its resize CSS property both.
style:
div {
resize: both;
overflow: auto;
}
HTML:
<body>
<div>
I am div
</div>
</body>
Borders of the extension toolbar popup aren't resizable, but you can implement the functionality yourself by adding 3 thin div elements (4px x 100%, for example) on sides of the popup except for the top, add mousedown event listener on each one that will set a global boolean flag, which will be used in mousemove handler, and unset in mouseup. To actually resize the popup simply set document.body.style.width = newWidth + 'px', for example. To provide visual cues add :hover CSS on those div elements with corresponding cursor: .... rule.

How to open a small box from a web page to make a choice

So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click

Jquery sliders behaves differently than example from documentation

I copy pasted the code from http://jqueryui.com/demos/slider/range.html for local testing. And what I see is different from what the url shows. When I click the slider "big dots" (used to change the value) the dot image gets a dotted border around it and it doesn't go away after I release the click until I focus another element on the page.
Here's how it looks in my local test (using Vader theme makes it easy to see):
Why this doesn't happen on the example from jQueryUI demos?
It's because it is a link in firefox, which displays a border by default on all links. Use this in your css.
a { outline: none; }
button::-moz-focus-inner { border: 0; }
Edit: it is a link, so I updated the css accordingly.

Categories

Resources