I use XArrow component to draw lines between rectangles. I added some tooltip on the line and it works fine. However, I need to get my mouse right over the line in order to make the tooltip visible which is understandable but I need to make the tooltip visible when the mouse is near the line, let's say if cursor is 10 pixels on the left + right side of the arrow.
This is what my design looks like right now, working tooltip and inspect elements of the curved arrow. Now I found some trick that enables me to show a tooltip when the cursor is near the arrow. This works for straight lines but it doesn't work for curved line. For the first picture, the code I use is
<span key={'j.id'}>
<div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
<Xarrow
start={`i.id`}
end={`j.id`}
key={`i.id-j.id`}
/>
</div>
<ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>
Now if I add SVGCanvasStyle prop with pointerEvents: 'all'
<span key={'j.id'}>
<div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
<Xarrow
start={`i.id`}
end={`j.id`}
key={`i.id-j.id`}
SVGcanvasStyle={{ pointerEvents: 'all' }}
/>
</div>
<ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>
it looks like
or the tooltip is shown over the path element (Picture1, 3rd row). Is there a way to show the tooltip on ~10px+ left and right of the arrow (an svg element, non linear in the curved case)? If possible, how can I achieve it?
Related
I am trying to make a toggle switch which has a label positioned on each side of the toggle and a label on top.
E.g. I'm trying to make a left/right switch.
Out put would look like this.
Side
Left [Toggle] Right
This is the toggle code:
<Toggle
floatingLabelText="Side"
label="Side"
labelPosition="right"
style={styles.toggle}
/>
There is no option to set both labels (right and left) at the same time in Toggle component.
What I have done is a workaround to this problem is by doing this kind of code:
<div>
<label>Option 1</label>
<Toggle
label="Option 2"
labelPosition="right"
style={{margin : '-20px 0px 0px 60px'}}
defaultToggled={false}
onToggle={function(event: object, isInputChecked: bool)}
/>
</div>
Please Note: You can change this 'style={{margin : '-20px 0px 0px 60px'}}' as per your desired place ment.
Material UI only supports a Left OR right side label. You'll have to use HTML and CSS to position the labels to the other two positions.
In this case I'd suggest not using the label property at all and just enclosing the Toggle in a div with some spans to show the appropriate text.
I am using angularjs material tabs https://material.angularjs.org/latest/demo/tabs .
Firstly, how to set the color for the left and right arrows?
<md-toolbar >
<div class="md-toolbar-tools tb">
<md-tabs class="tab">
<md-tab ng-repeat = "item in toDoList track by $index" label="{{item.name}}" >
</md-tab>
</md-tabs>
</div>
</md-toolbar>
For example, set the color of the arrows from white to other colors(like red) in the image and fiddle below
jsfiddle 1
Next, how to make the arrows always visible? In the image and jsfiddle below, if there is no tab overflow, the left and right arrows will not appear.
jsfiddle 2
Lastly, is there any formal/specific name for the left and right arrows, like pagination arrow? Because I can't find much related topic about the md-tabs arrow, maybe I used the incorrect keyword for the arrow.
For arrows color you can use this rule :
md-toolbar:not(.md-menu-toolbar) md-icon{
fill:red;
}
jsfiddle 1
But to make them always visible, I don't think it's possible unless you modify the Angular Material source code
I'm not good at styling so I will ask straight ahead:
how do I draw a border over the whole web application's UI composed of nested views (ion-nav-view)?
My initial try was to set a class on a body:
<body ng-class="{'noConnection': hiresUnavail}" ng-app="app" ng-controller="MainCtrl">
this is being produced now:
now, you can see a top-left corner of the web browser. The orange line is the desired border defined in the body tag as you can see upper. So what should I do in order to see this border all round the borders even on the top of the nested ng-views?
Thanks!
I have one button with blue bg color and I want to add black shadow as shown in the image,
how can be done in codenameone ?
You can do many things.
The simplest is that when you cut the 9-piece border you can just include the shadow as part of the image: http://www.codenameone.com/how-do-i---create-a-9-piece-image-border.html
You can also use a LayeredLayout and place the button within then place a shadow button in the bottom layer.
I use CSS speech bubble (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/)
in order to implement a chat.
This is an example of screen I ended up with:
The blue bubble is a message from me and the red is from a counterpart.
The piece of code I wrote is:
<p class="inset list" ng-repeat="message in messages | orderBy:'id'"
ng:class="{ true:'triangle-right right', false:'triangle-right left'}
[message.sender == {{ user }} ]">
{[{ message.body}]}
</p>
while {[{ }]} is a symbol of angular parameter.
I would like that the width of the bubble will be fit to the length of the text inside.
Please pay attention that the message inside one bubble may include several rows so the width needs to fit to the longest row.
In addition, the blue bubbles need to be alignment to the right.
I tried to insert function for ng-style as function of message.body but I didn't succeed to make the width changed as I wanted...
It would be very kind if one of you can write me detailed and implicit instructions...
This works for me:
http://jsfiddle.net/K67NN/1/
this is my test html:
<p class="triangle-right left">test1</p>
<p class="triangle-right right">test2</p>
I used the stock css that you linked to, and I just added these to the classes left and right
.left{float:left; clear:both}
.right {float:right; clear:both}
This works because floated elements have implicit width by default and they are aligned to the left or right of their enclosing element. The clear:both just keeps them from piling up on one line.