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/
Related
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?
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
To display a hint when my user hovers his mouse over an image
<img src="image" alt="product code 000000">
However, the default alt text always displays on the right of my cursor.
Is there any way I can move the displayed mini popup to the left of the mouse cursor ???
Update Thank you everyone for your replies.
You mean the yellow tooltip ? You can't. But you can make your own using JavaScript.
The tooltip is the Title element, the alt is the text that appears when the image is not visible. You cannot format the title element, however as has been mentioned you can add in a custom tooltip. I like using the jquery UI tooltips which are easy to get working for a start.
Then you would be able to change the CSS to move it over to the left.
There are tons of javascript tooltip scripts around that can do that for you. By the way, in most browsers the tooltip displays on title="" attribute, not alt.
No, you can't but you can create your own using css and/or javascript.
you could create a toolbox in css
img{position:relative;}
img:hover::before{
content:attr(alt);
position:absolute;
left:0;
top:0;
}
http://www.w3.org/TR/WCAG10-CSS-TECHS/#Alt
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
How can I show an image as a tool tip in my web page. I want my tool tip in a custom image, rather than the usual one. I tried defining a class to hold the image and added the class to the anchor element, but I did not get the image. Someone help me.
My css:
.bubbleText{
background:transparent url(../images/static/link_hover_M_120.png) no-repeat;
}
.questionIcon{
background: url(../images/static/question2.png) no-repeat;
text-decoration:none;
}
My html code:
<a title="Your Contact number" href="#" class="questionIcon bubbleText"> </a>
The questionIcon class hold a 'question mark' image. On hovering on the question mark, I need the tool tip to be displayed inside the image. The image is just a white box with borders.
If you mean you want to style the tooltip you'll need to use javascript to create the functionality. What script you use depends on what JS framework you're using, if any.
There's a big list of tooltips on this site : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Uses different frameworks, so pick the one that works for you.
I would use a common library like jQuery. There are a lot of running examples: http://jquery.bassistance.de/tooltip/demo/
Browsers don't support rich tooltips but it can still be done
The easiest way is to use some plugin (if you're using something like jQuery) that provides rich tooltips functionality. Browsers can only display text that's defined in alt attribute (of image elemnt) or title attribute in any other HTML element (including image).
This will get you started on jQuery tooltip plugins.