I'm trying to add custom tooltips into my Chrome packaged app. I've tried Twitter's Bootstrap and jquery.tipsy which works fine, though I don't seem to be able to get the behavior I want.
The problem is that I have a quite tiny window and therefore I would like tooltip to stretch over the AppWindow's border.
The default tooltip using HTML element's title attribute (e.g. <button title="My Tooltip text">Click!</button>) does exactly that, so I wonder whether it is possible to style the tooltip privided by title attribute or to make a plug-in tooltip to float over the window's bounds?
Related
I'm working with CSS and facing some problems with using a cursor attribute CSS on the Chrome browser. I would like to change/remove the discover background which is shown in the below image. It's the first button.
This discover background won't appear if I don't use cursor attribute CSS (cursor: pointer).
Chrome has introduced an updated look to their styles, including time and date picker elements that have a dropdown / overlay element to them.
I'm specifically attempting to style an input type="time" element. Here is a demo of the native element. Worth noting is under Chrome 83 that it shows the updated dropdown page for selections.
Specifically, the dropdown shown above (the 00 and 00 text, with blue backgrounds, on an overlaid element) is what I would like to style or modify in some way.
I have enabled the shadow DOM option within the Google Chrome DevTools. I've been able to identify the pseudo elements for things like the input fields and icons and such, but not the dropdown.
It is difficult to provide further demonstrations or links since this is simply a native input. However, this is an example of the pseudo elements I can see on the basic native input.
My use-case is the app I'm using this for is for uses a dark UI color scheme, and this white popup element is very jarring. I prefer the native HTML input (especially with the keyboard accessibility of selecting the hour / minute / 12hour format quickly) over a custom timepicker.
Ideally I would not want to do anything too hacky here -- am I even approaching this in the right way? Want this not to break whenever Chrome updates.
You cannot change the style of time or datepicker dropdown as per chrome FAQ
https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker
I suggest you to switch over to some custom or bootstrap controls.
If you dont want the dropdown to be displayed, you could add a css rule to hide the icon, when you click that icon is when the dropdown gets displayed.
This rule should work
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}
i have a tinymce editor instance and by default the tooltips are positioned to the south of the object (buttons menuitems etc)
i would like to position them to the right (or east)
i can see in the css for the tooltips that there appear to be classes that operate this behaviour, but i simply can not work out how to use them
default css snippet
.mce-tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-nw .mce-tooltip-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-ne .mce-tooltip-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-s .mce-tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-sw .mce-tooltip-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-se .mce-tooltip-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-e
can you see things like .mce-tooltip-ne in there - i assume that controls placing the tooltip to the north east
but i literally cant even make it happen
please help
i couldnt work out how to call the styles with the compass bearings
so i just shifted the tooltip using a couple of styles in the default tooltip class
highlighted in bold below
.mce-tooltip{position:absolute;left:100px;padding:5px;opacity:.8;filter:alpha(opacity=80);zoom:1}
.mce-tooltip-inner{ position:relative;top:-10px; font-size:11px;background-color:#000;color:#fff; min-width:400;max-width:600px; padding:5px 8px 4px 8px;text-align:center;white-space:normal}
this is from /tinymce/skins/lightgray/skin.min.css
the additions to the code pushed the tooltip to the right enough for what needed
If you are referring to the tooltip shown in image above, that is simply a native browser tooltip displaying the title attribute of the anchor tag containing the icon.
Here's the HTML for that button:
<a title="Bold (Ctrl+B)"
onclick="return false;"
onmousedown="return false;"
class="mceButton mceButtonEnabled mce_bold"
href="javascript:;" id="story_content_bold">
<span class="mceIcon mce_bold"></span>
</a>
Based on the above, the short answer to your question is: no you cannot change the position of the browser's native tooltip.
However there may be ways to manipulate the way the tooltips are displayed, which will require you to make changes to tinyMCE source code.
One idea is to use another attribute to contain the title text. This way you can use CSS to style the tooltip based on the alternative attribute rather than having the native browser tooltip.
For example you can use data-alt attribute:
<a data-alt="Bold (Ctrl+B)" class="specialtooltip"></a>
Then use CSS to style it as tooltip:
a.specialtooltip[data-alt]:hover:after {
/* style to achieve tooltip effect */
}
Please refer to this fiddle for example: http://jsfiddle.net/va3jn2qy/1/
Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000
I'm currently editing a .html file with telerik radtooltips hooked up to a mapped image. Basically there are small blocks on the image that have been set to fire the radtooltips on mouse over. The html file is ran inside of a .aspx file and it inherits the telerik namespace. However, I cannot set attributes in the radtooltips and it instead defaults to a really ugly default style that I can no longer change. I've also tried setting up divs and tables inside the tool tip however, the tooltip container isn't affected so you get a nasty yellow border from the tooltip around whatever definitions are setup for the table or div.
Example:
The orange background is defined by a div inside the tooltip:
<div style="background-color:Orange; border-color:#b24710;">
This is the current tooltip I have defined...and the attributes that are being ignored:
<telerik:RadToolTip ID="rttGeochemTip" runat="server" TargetControlID="geochem" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
I have also tried this without the nested div:
<telerik:RadToolTip ID="rttCharTechTip" runat="server" TargetControlID="char" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
the code above without the nested div is the same as the screenshot except for the orange is replaced by that default yellow border color because I'm not overriding the inside color. I have also tried using CSS to the same failed effects.
Any ideas of what might cause this behavior?
The html page was nested inside a .aspx page and some how the inheritance of the telerik skin sunset was being applied and I wasn't able to override it. To fix the problem I ended up adding in a telerik skinmanager and applied a more appropriate skin for my controls and that fixed the issue. I'm assuming our styling setup wasn't built to the telerik skin standards.