I want a tooltip to widen instead of extending off the bottom of the page. I've got a tooltip that can be quite long and as the max-width is 200px it is extending off the bottom of the page.
I am able to hardcode the max-width of the tooltip with
.tooltip-inner {
max-width: 350px;
}
which helps but when the tooltip is shorter I don't want the width to increase, only when the tooltip will disappear off the page.
This fiddle has a basic example of what I've got: http://jsfiddle.net/76xz3jog/1/
const button = document.getElementById("btn");
const buttonText = "A button"
const tooltipText = "A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. A long tooltip. "
button.innerHTML = buttonText;
button.setAttribute("title", tooltipText);
$('#btn').tooltip();
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" integrity="sha512-cp9JSDyi0CDCvBfFKYLWXevb3r8hRv5JxcxLkUq/LEtAmOg7X0yzR3p0x/g+S3aWcZw18mhxsCXyelKWmXgzzg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" integrity="sha512-PxtG6eoPtr5QdgWieDr0Bsa0+IXe2qRAG/8gSw/pBWZWcXQRAhWU4lEumKTjmOMjgmen3q/robV+RD3sqwR36g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" class="btn btn-default" id="btn" data-toggle="tooltip" data-placement="bottom"></button>
Instead of this
It will hopefully look like this
"only when the tooltip will disappear off the page." can you please put some light on this, it's a bit unclear from the description what you want to achieve. Thanks!
Related
I have a rectangle with some text on it defined as a button symbol.
My problem when using the button is that the rectangle does NOT resize but keeps its dimensions. And when I resize the button the text font changes too.I have buttons with short text and some with very long texts. Currently the ones with long text the rectangle is not long enough to accommodate the whole text.
Anybody know how to make a button grow or shrink with text one enters at instance level?
I ended up duplicating the button symbol and making the rectangle much bigger as I found now way of scaling whatever symbol background scale with the text
I'd like to know how to align vertically text inside a QPushButton. When I do ui->button->setText("help"), the text is written in the top button. I tried with CSS but nothing. Just if I write the text into the designer, it is in the centre button. However I need to do it dynamically, but I don't know which set stylesheets CSS property to put.The problem is when I convert from char * to QString.
char *key=getTraslateWord("dsfs");
ui->button->setText(QString(key));
Given something like:
<div class="panel-footer">
<button type="submit" name="submit" value="submit" class="btn btn-primary">Submit</button>
Some lengthy amount of text goes here.
</div>
I want the text to automatically wrap next to the button, instead of starting next to it and wrapping underneath it. It appears with the default alignment, the text of the button is vertically aligned with the text next to it - but the button consumes additional vertical space for the button background. I want the text to use that space - instead of only seeing a single available line. It looks to me my text should be able to wrap at least once if not twice next to the button without consuming additional vertical space.
I've tried just wrapping the button & text in separate divs - but then the text appears under the button. There's obviously something I'm missing - I either want to do this using native bootstrap or a simple inline style - I don't want to modify css.
The default:
[---button top margin--]
[---------SUBMIT---------] Normal text aligns with button text
[button bottom margin]
and then wraps beneath button like this.
Desired:
[---button top margin--] If the text is long enough it should wrap
[---------SUBMIT---------] in this space and automatically
[button bottom margin] center vertically against button
Let's see if I can express it differently - the button element occupies a certain vertical space, which is typically greater than just the vertical height of the text. I want to have a text area next to the button that has the same vertical height as the total button - not just the button text.
I have a dynamically built string that is sometimes too long, but still needs to be displayed fully to the user. I would much rather have the text scroll than creating a tooltip for it.
I have creating a label with this:
Label text = new Label("hello there i hope this text is long enough to take up space");
TranslateTransition tran = new TranslateTransition(Duration.millis(75000));
tran.setNode(text);
tran.setByX(-400);
tran.setInterpolator(Interpolator.LINEAR);
tran.setCycleCount(Timeline.INDEFINITE);
// add the text
tran.play();
One, when I do this, if the text is "this is really long" and it's shortened to "this is really..." then when the label scrolls, the text remains "this is really...". Another thing is this scrolls the label away, changing the x position of the element. Is there a way to just change the text will a scroll instance?
Also, is there a way to programatically determine if a given text is going to be too large for a specified area?
The most simplest method could be "marquee":
http://www.quackit.com/html/codes/html_marquee_code.cfm
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
http://www.sitepoint.com/web-foundations/marquee-html-element/
But it´s nonstandard: http://www.w3.org/TR/css3-marquee/
A better method is CSS3: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
What is proper way to display a gif image into the dialog with text with nice formatting etc..
So far here is my code:
Copy code
var $dialog = jQuery('<div></div>').html('<p>Sending your message...</p><img src="../images/AjaxWait.gif"/>')
however by doing this the gif is not aligned nicely to the text, etc
What is the best way to format content of the dialog?
thanks
bogumbiker
Float the paragraph to the left with CSS.
You need to use CSS, what are you looking for as the end result.
Something like this I would float my image left
var $dialog = jQuery('<div></div>').html('<p>Sending your message...</p><img src="../images/AjaxWait.gif" style="float: left; padding: 10px;"/>')