I have some tooltips that are set up like this:
HTML:
<button id="myButton" title="This is a tooltip">My Button</button>
Javascript:
tippy('#myButton', {
content: "Some stuff",
});
Is there any way I can set the content: to use the contents of the title= attribute as the contents of the tooltip?
Based on the documentation, you can use reference.getAttribute('title')
Ex.:
tippy('#myButton, {
content: (reference) => reference.getAttribute('title'),
});
Related
I want to change in runtime how my popover is opening (from 'hover' to 'click'). I added code similar to the below:
<el-popover
placement="top-start"
width="200"
:trigger="someCondition ? 'hover' : 'click'"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
The title and content successfully changes dynamically in runtime but the trigger stays with the initial value even if the condition changes.
What am I doing wrong?
PS - I am pretty new with vue.js (but very experienced with programming and other web frameworks - e.g. React).
Thanks!
Use the key modifier on the el-popover as the element should be recreated
The key special attribute is primarily used as a hint for Vue’s
virtual DOM algorithm to identify VNodes when diffing the new list of
nodes against the old list. Without keys, Vue uses an algorithm that
minimizes element movement and tries to patch/reuse elements of the
same type in-place as much as possible.
HTML:
<el-popover
:key="trigger"
placement="top-start"
title="Title"
width="200"
:trigger="trigger"
content="this is content, this is content, this is content">
<el-button slot="reference">Hover to activate</el-button>
</el-popover>
<el-button #click="changebehavior">Change behavior</el-button>
JS:
data() {
return {
visible: false,
trigger: 'hover'
};
},
methods: {
changebehavior() {
this.trigger = 'hover' == this.trigger
? 'click'
: 'hover'
}
}
Using key modifier
Working example
var Main = {
data() {
return {
visible: false,
title: 'Default title',
content: 'Default content',
trigger: 'click',
};
},
methods: {
changeToClick() {
this.title= 'Click title';
this.content= 'Click content will be here';
this.trigger = 'click';
},
changeToHover() {
this.title= 'Hover title';
this.content= 'Hover content will be here';
this.trigger = 'hover';
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.13.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.13.2/lib/index.js"></script>
<div id="app">
<template>
<el-popover
:key="trigger"
placement="top-start"
:trigger="trigger"
width="200"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
<el-button type="text" #click='changeToClick'>Change To Click</el-button>
<el-button type="text" #click='changeToHover'>Change To hover</el-button>
</template>
</div>
I'm looking to enter an image url in a text field, then have that url be displayed in an image tag but also have that original url modified by adding an API string at the end.
Here is the js:
Vue.component('imagesinstagram', {
props: ['url'],
template: `
<div class="container imgix-cell">
<img class="img-variant" :src="url + '?q=60'"/>
<div class="subtext">
<br>Instagram
</div>
</div>
`
})
new Vue({
el: '#app_images',
data: function() {
return {
myUrl: '',
comparisons: [
{ id: 1, url: 'myUrl' }
]
}
}
})
Now here is the html:
<input type="text" placeholder="Enter imgix URL" v-model="myUrl"/>
<div>Entered URL: {{ myUrl }} </div>
</div>
<div class="container">
<imagesinstagram
v-for="comparison in comparisons"
v-bind:url="comparison.url"
></imagesinstagram>
</div>
So essentially I enter an image url as a text field, it is returned as myUrl. Then I am trying to use my vue component to call that same url but add ?q=60 afterwards as a query string.
It is just returning this in my codepen: https://cdpn.io/boomboom/v2/myUrl?q=60 . the myUrl should be the actual image url I entered.
Ok there are a few problems and I don't understand what you are trying to do with 'comparisons'. For starters, in your components you only have access to the component's props. So you have 'url' and not 'myUrl' ( which is only available in the parent component).
Then, in your data, you can't reference other parts of your data. When you say { id: 1, url: 'myUrl' }, url will just be the literal string 'myUrl'. This is not what you want.
I've made the changes and I think this is doing what you mean, but I don't have imgix.
Using Gridsome, I want to reference any given page's MetaInfo like the following in the layout component:
<h1 class="page-title">
{{ metaInfo.title }}
</h1>
In the page I do have the metaInfo defined like this (and that does fill the head correctly)
export default {
metaInfo: {
title: 'About'
}
}
You must change your metaInfo Object to a function and return the title object.
Try this:
<h1 class="page-title">
{{ $metaInfo.title }}
</h1>
And in your export default use this:
metaInfo() {
return {
title: 'About'
};
}
I tried to stay away from the Vue components of Spark as much as possible but I discovered I had to implement a certain mail settings so I can't hold it much longer.
Luckily the Spark documentation contains a small cookbook for adding profile fields:
https://spark.laravel.com/docs/4.0/adding-profile-fields
Most parts are within my (limited PHP) comfort zone:
First the blade php:
Mail settings
<div class="col-md-6">
<label class="radio-inline"><input type="radio" value="profile" v-model="form.type" name="profile">Profile</label>
<label class="radio-inline"><input type="radio" value="website" v-model="form.type" name="website">Website</label>
<label class="radio-inline"><input type="radio" value="combined" v-model="form.type" name="combined">Combined</label>
<span class="help-block" v-show="form.errors.has('mail-settings')">
#{{ form.errors.get('mail-settings') }}
</span>
</div>
</div>
Which is integrated:
<!-- Update Mail settings -->
#include('settings.profile.update-mail-settings')
So as can be seen in the previous code block, I wish to store the result of 3 radio buttons.
However the linked Vue js file is giving my headaches:
Vue.component('update-mail-settings', {
props: ['user'],
data() {
return {
form: new SparkForm({
profile: ''
website: ''
combined: ''
})
};
},
mounted() {
this.form.mailsettings = this.user.mailsettings;
},
methods: {
update() {
Spark.put('/settings/profile/mail-settings', this.form)
.then(response => {
Bus.$emit('updateUser');
});
}
}
});
But how on earth do I integrate the radio buttons in the SparkForm?
In Vue, data binding occurs when you v-model to the object by name. Or in other words, you call v-model="object.property" on an input. When the user fills out the form, the value of form.type will match the form input. So simply change your form object to read:
data() {
return {
form: new SparkForm({
type: '' <- this can now be v-modeled to "form.type"
})
};
},
Your radio buttons don't need to change because they are bound correctly: v-model="form.type"
https://v2.vuejs.org/v2/guide/forms.html#Radio
trying to use the FlipView control in WinJS and having some issues. I am able to bind it to a datasource and get the URL/picture property show up in the flipview control content pane but it fails to load the picture - any suggestions :(
I have made sure that src property of the image tags points to the URL/picture property. I am able to load the image via a normal img tag.
listed below is the template definition and data source - as always, appreciate any pointers :)
datasource:
var dataArray = [
{ type: "item", title: "Hole 1", picture: "/images/IMG_0550.jpg" },
{ type: "item", title: "Hole 2", picture: "/images/IMG_0564.jpg" },
{ type: "item", title: "Hole 3", picture: "/images/IMG_0572.jpg" },
{ type: "item", title: "Hole 4", picture: "/images/IMG_0594.jpg" },
{ type: "item", title: "Hole 5", picture: "/images/IMG_0605.jpg" }
];
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
WinJS.Namespace.define("ImageData", {
bindingList: dataList,
array: dataArray
});
flipview binding:
Gallery content goes here.
<div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
<div>
<img src="#" data-win-bind="src: picture; alt: title" />
<div>
<h2 data-win-bind="innerText: title"></h2>
</div>
</div>
</div>
<div id="basicFlipView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : ImageData.bindingList.dataSource, itemTemplate : simple_ItemTemplate }">
</div>
</section>
use itemTemplate : select('#simple_ItemTemplate') instead of `itemTemplate : simple_ItemTemplate'
It is good to set template and datasource in code to avoid typo error and code can be debugged also.
basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;
I do not agree with ankur comment, from my POV, databinding and MVVM is the way to go.
About your question, run the project and use DOM explorer to see what get generated, also use a class instead of an id as template identifier (since it gets generated multiple times)